ReactJS ::在显示微调框时加载图像的问题

如何解决ReactJS ::在显示微调框时加载图像的问题

我是个很新的反应者，我正在尝试完成有关在加载图像时显示微调器的简单任务。它的工作方式与我预期的相同，即前两次加载微调器，然后加载图像。但是之后，微调器将继续旋转，并且不会加载图像。这是可以包含在index.js中的App.js代码：

import React from "react";
import CircularProgress from "@material-ui/core/CircularProgress";

export default function App() {
  const [loaded,setLoaded] = React.useState(false);
  const [image,setimage] = React.useState({
    src: "https://via.placeholder.com/60"
  });

  const handleClick = () => {
    setLoaded(false);
    setimage({ src: "https://picsum.photos/200/300" });
  };

  const getProgress = () => {
    console.log("-----inside getProgress",loaded);
    return (
      <CircularProgress
        color="secondary"
        style={!loaded ? { display: "block" } : { display: "none" }}
      />
    );
  };

  return (
    <div className="App">
      <>
        <img
          src={image.src}
          alt="a placeholder"
          onLoad={() => setLoaded(true)}
          style={loaded ? { display: "inline-block" } : { display: "none" }}
        />
        {!loaded && getProgress()}
        <br />
        <a href="#" onClick={handleClick}>
          Click here
        </a>
      </>
    </div>
  );
}

这是index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,rootElement
);
import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,rootElement
);

我发现发生此问题的原因是因为onLoad第三次后未将load设置为true，因此它一直显示微调器。但是让我感到困惑的是，第一次单击“单击此处”链接与第二次或多次单击都非常相似。为什么输出不一样？我也在寻找如何解决这个问题并使它变得更好的方法。我在StackOverflow和其他地方提到了很多资料，但是我无法解决。

感谢您的帮助！

解决方法

在getProgress中，您是控制台记录加载的变量。

  const getProgress = () => {
    console.log("-----inside getProgress",loaded);
    return (
      <CircularProgress
        color="secondary"
        style={!loaded ? { display: "block" } : { display: "none" }}
      />
    );
  };

在JavaScript中，&&是and运算符，因此在这一行：

{!loaded && getProgress()}

如果and运算符的第一个操作数为true，则它将评估第二个操作数，即getProgress（）。但是，因为使用了！loaded，所以基本上是说未加载时运行getProgress（）。然后它记录的内容总是错误的，因为只允许它在！loaded时运行。

如果要在按下按钮时查看实际值，则需要执行以下操作：

{getProgress()}

比这更好的是使用React的useEffect挂钩来观察不同的load值：

React.useEffect(() => {
  console.log(loaded);
},[loaded]);