在 useEffect 上加载数据后设置状态答案

【问题标题】：Setting state after data load on useEffect在 useEffect 上加载数据后设置状态
【发布时间】：2019-07-03 16:02:00
【问题描述】：

在 useEffect 上加载数据后尝试更新状态。能够更新局部变量但不能更新状态。我正在关注https://www.robinwieruch.de/react-hooks-fetch-data/ 中的一个示例，其中 Robin 以类似的方式设置状态。出于某种原因，在我的情况下，状态变量从未正确设置。

使用 AWS Amplify 加载 graphQL 数据。似乎对局部变量有效，但对状态变量无效。

const [serviceTypes, setServiceTypes] = useState([{}]);
let myServiceTypes = [{}]; // try it with a local variable to debug

useEffect(() => {
  let unmounted = false;

  async function fetchData() {
    const result = await API.graphql(
      graphqlOperation(queries.listServiceTypes)
    );
    console.log(result);
    console.log('setting service types...');
    console.log(result.data.listServiceTypes.items);
    setServiceTypes(result.data.listServiceTypes.items);
    myServiceTypes = result.data.listServiceTypes.items;
    console.log(myServiceTypes); // set correctly
   console.log(serviceTypes); // empty
  }
  if (!unmounted) {
    fetchData();
  }
  return () => {
    unmounted = true;
  };
}, []);

期望将 serviceTypes 设置为加载的数据。相反，它是空的。

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

setState 不能像那样同步工作。您不能期望您的 serviceTypes 变量在设置后立即包含数据。它将在组件重新渲染时更新。尝试将 console.log(serviceTypes); 移到 useEffect 之外。

请参阅 https://stackoverflow.com/a/36087156/5273790 了解 setState async 的说明。

【讨论】：

我已经修改了我的代码以放置在与medium.com/@cwlsn/… 非常相似的钩子中。唯一的变化是它是 AWS Amplify GraphQL 提取而不是 url。我收到错误“警告：无法对未安装的组件执行 React 状态更新。这是一个无操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 useEffect 清理中的所有订阅和异步任务功能。”令我困惑的是，有许多类似的代码示例，但我实现它们时，它们会收到此错误。
现在似乎可以正常工作而没有警告。这篇文章很有帮助。 itnext.io/…。添加挂载和 AbortController() 处理似乎已经奏效了。

【解决方案2】：

这是因为你没有考虑效果并正确渲染。

安装/渲染 1

fetchData 被调用
setServiceTypes 并将服务类型传递给下一个渲染
serviceTypes 为空

渲染 2

useEffect 未被调用
serviceTypes 现在是之前设置的 serviceTypes

尝试在渲染/返回之前注销 serviceTypes

【讨论】：

谢谢。我想要完成的事情应该很简单。通过 useEffect 加载数据并设置绑定到 Menu 组件的状态。我关注了几篇发表的文章，它们似乎做了类似的事情。我似乎遗漏了一些东西......这应该不难完成。
您应该编辑问题并添加您尝试呈现的整个功能。由于console.log(myServiceTypes); 正确返回，因此您的代码肯定会正确设置状态。其他地方有问题