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>
  );
}

从“React”导入React；
从“@material ui/core/CircularProgress”导入CircularProgress；
导出默认函数App（）{
常量[loaded，setLoaded]=React.useState（false）；
const[image，setImage]=React.useState({
src:“https://via.placeholder.com/60"
});
常量handleClick=（）=>{
setLoaded（假）；
setImage（{src:“https://picsum.photos/200/300" });
};
const getProgress=（）=>{
log（“----insidegetprogress”，已加载）；
返回(
);
};
返回(
setLoaded（true）}
style={loaded？{display:“inline block”}:{display:“none”}
/>
{！已加载（&getProgress（）}


);
}

这是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
);

从“React”导入React；
从“react dom”导入react dom；
从“/App”导入应用程序；
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素
);
从“React”导入React；
从“react dom”导入react dom；
从“/App”导入应用程序；
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素
);

我认为问题发生的原因是，在第三次加载后，onLoad没有将loaded设置为true，因此它一直显示微调器。但让我困惑的是，第一次点击“点击这里”链接与第二次点击该链接非常相似，而且点击次数不限。那么为什么输出不一样呢？我也在寻找如何解决这个问题，让它变得更好。我在StackOverflow和其他地方提到了很多资料，但我无法解决这个问题

---

感谢您的帮助

在getProgress中，您正在控制台上记录加载的变量

const getProgress=（）=>{
log（“----insidegetprogress”，已加载）；
返回(
);
};

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

{！已加载（&getProgress（）}

如果and运算符的第一个操作数为true，则它将计算第二个操作数getProgress（）。但是因为你用过！已加载基本上是指未加载时运行getProgress（）。然后，它记录的内容总是错误的，因为您只允许它在以下情况下运行！上膛了

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

{getProgress（）}

比这更好的是使用React-useEffect钩子来观察加载的不同值：

React.useffect（（）=>{
控制台日志（已加载）；
}，[加载]；

感谢您的投入。我想我知道你在抱怨什么，可以使用useffect钩子记录加载状态的值。但是，我需要知道我能做些什么来解决这个问题。