如何使用 React useState 多次渲染

Question

我正在尝试在 React 中定义一个函数，必须在该函数上多次呈现组件，因为我在函数本身内部多次更改状态。我知道 useState 钩子会在函数结束时重新渲染组件，那么如何在设置新状态后立即重新渲染呢？代码是这样的：

function App() {
  const [state, setState] = useState(0);

  const getServerState = () => {
    e.preventDefault();
    // Send something to the server and put the response on "response"
    if (response.customVar === "uploading") {
      setState(1);
      // Send another request to the server and wait for the response
      if (newResponse.customVar === "uploaded" && state === 1) {
        setState(2);
      } else {
        throw new Error("Error in uploading response");
      }
    } else {
      throw new Error("Error in response");
    }
  };

  const checkState() => {
    if (state === 0) return "Waiting for user click";
    else if (state === 1) return "Your file is being uploaded";
    else if (state === 2) return "Your file is ready!";
  };

  return (
    <div>
    {checkState()}
    <button onClick={getServerState}>
      Click me
    </button>
  </div>)
}

在上面的示例中，我没有得到任何重新渲染，因为状态更改为 1“为时已晚”，并且在状态为 1 时检查的 if 没有通过。这个问题有方法解决吗？我不能使用 useEffect 钩子，因为效果会更新状态，这会导致循环。

Answer 1

setState 后不能立即获取状态，取而代之的是，您需要定义一个临时布尔变量。

function App() {
  const [state, setState] = useState(0);

  const getServerState = () => {
    e.preventDefault();
    var isUploaded = false;
    // Send something to the server and put the response on "response"
    if (response.customVar === "uploading") {
      setState(1);
      isUploaded = true;
      // Send another request to the server and wait for the response
      if (newResponse.customVar === "uploaded" && isUploaded) {
        setState(2);
      } else {
        throw new Error("Error in uploading response");
      }
    } else {
      throw new Error("Error in response");
    }
  };

  const checkState() => {
    if (state === 0) return "Waiting for user click";
    else if (state === 1) return "Your file is being uploaded";
    else if (state === 2) return "Your file is ready!";
  };

  return (
    <div>
    {checkState()}
    <button onClick={getServerState}>
      Click me
    </button>
  </div>)
}