javascript - 如何在异步函数内批量调用 React setState() ？

Question

所以我遇到了一个问题，React 没有在异步函数内部批处理多个 setState() 调用(React 通常在异步函数外部自动执行此操作)。这意味着当我的代码运行时，多个连续的 setState() 调用彼此冲突，第一个 setState() 导致组件更新，第二个 setState() 在组件有足够的时间重新安装之前发生，我收到错误“无法对已卸载的组件执行 React 状态更新”。我做了一些研究，发现这是预期的行为，但我没有找到有关如何解决该问题的信息。

这里有一些示例代码(无法运行)，只是为了形象化我想说的内容。在这种情况下，行setData(响应.数据);和设置加载(假)；冲突并导致错误。

我需要某种方法来使这两个调用原子化。

import React, { useState } from "react";
import Button from "@material-ui/core/Button";

const Demo = () => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState({});

  const fetchData = async () => {
    setLoading(true);
    const response = await callAPI();
    if (response.status === 200) {
      setData(response.data);
    }
    setLoading(false);
  };

  return (
    <div>
      <Button disabled={loading} onClick={() => fetchData()}>
        Fetch Data
      </Button>
      <p>{JSON.stringify(data)}</p>
    </div>
  );
};

export default Demo;

Answer 1

我认为您可以避免将加载作为独立的 bool 变量而不是组件状态的一部分。另一种方法是使用 useEffect 延迟 API 调用，直到您的 loading 变量发生变化。 This answer已满足您的需求。最后，您可以利用类组件 - setState() 函数接受回调作为第二个参数 - 这是在钩子(Hook)到位之前进行原子状态更改的方法。