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

Question

我对反应很陌生，我正在尝试做这个简单的任务，即在图像加载时显示微调器。它的工作方式与我期望的前两次相同，即微调器加载，然后加载图像。但在那之后，微调器继续旋转并且图像不加载。这是可以包含在 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 没有将加载设置为 true，因此它一直显示微调器。但让我感到困惑的是，第一次点击“点击这里”链接与第二次点击该链接非常相​​似，而且次数不限。为什么输出不一样？我也在寻找如何解决这个问题并让它变得更好。我在 StackOverflow 和其他地方引用了很多材料，但我无法解决这个问题。

感谢任何帮助！

Answer 1

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

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

在 JavaScript 中 && 是 and 运算符，所以在这一行中：

{!loaded && getProgress()}

如果 and 运算符的第一个操作数为真，那么它将评估第二个操作数 getProgress()。但是因为你使用了!loaded，你基本上是在说当它没有加载时运行getProgress()。然后它记录的内容总是错误的，因为您只允许它在 !loaded 时运行。

如果您想查看按下按钮时的实际值是多少，那么您需要这样做：

{getProgress()}

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

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