Question

我是在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（）调用周围放置足够长的超时时间（5毫秒不起作用，5秒钟不起作用）时，准确的tableData将按预期显示，这使我认为这可能是我的提取函数返回之前的问题收集实际上已经准备好了。但是setTableData（）之前的console.log（）正在输出正确的信息-而且我不确定如果代码中的那个时候数据不可用怎么办。

我希望这是我很想念的简单事情。有什么想法吗？

Answer 1

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

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

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

<块引用>

"如果计数为 5，那么我们的组件仍然以计数重新渲染等于 5，React 将比较之前渲染中的 [5] 和 [5] 从下一个渲染。因为数组中的所有项都相同（5 === 5)，React 会跳过这个效果。这就是我们的优化。”

因此，您希望它重新渲染，但仅在数据发生更改的情况下，然后跳过重新渲染。

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

1 个答案: