时间戳

首页 > 解决方案 > 为什么我的状态没有及时更新获取的数据，以便 useEffect 用新状态更新我的 DOM？

javascript - 为什么我的状态没有及时更新获取的数据，以便 useEffect 用新状态更新我的 DOM？

问题描述

我是在 React 中使用钩子的新手。我试图在组件首次安装时通过使用 useEffect() 和空数组的第二个参数来获取数据。然后我试图用新数据设置我的状态。这似乎是一个非常简单的用例，但我一定做错了，因为 DOM 没有使用新状态进行更新。

  const [tableData, setTableData] = useState([]);    

  useEffect(() => {
    const setTableDataToState = () => {
      fetchTableData()
        .then(collection => {
          console.log('collection', collection) //this logs the data correctly
          setTableData(collection);
        })
        .catch(err => console.error(err));
    };

    setTableDataToState();
  }, []);

当我在 setTableData() 调用周围设置足够长的超时时间（5ms 不起作用，5s 起作用）时，准确的 tableData 将按预期显示，这让我认为这可能是我的 fetch 函数在集合之前返回的问题其实准备好了。但是 setTableData() 之前的 console.log() 正在输出正确的信息——如果代码中的那个点数据不可用，我不确定它怎么能做到这一点。

我希望这是我所缺少的非常简单的东西。有任何想法吗？

标签： javascriptreactjsasynchronouspromisereact-hooks

解决方案

传递给 useEffect 的第二个参数可用于跳过效果。

文档：https ://reactjs.org/docs/hooks-effect.html

他们继续在他们的示例中解释他们使用 count 作为第二个参数：

“如果计数是 5，然后我们的组件重新渲染计数仍然等于 5，React 将比较上一次渲染的 [5] 和下一次渲染的 [5]。因为数组中的所有项目都是相同的 ( 5 === 5), React 会跳过效果。这是我们的优化。”

因此，您希望它重新渲染，但只是到数据更改然后跳过重新渲染的程度。

推荐阅读