带钩子的 useEffect 给我一条警告信息

Question

我正在尝试实现这个：

 useEffect(() => {
    setSingleFieldData({ ...singleFieldData, id: uuidv4() });
  }, []);

基本上，当组件加载时，我想使用 uuidv4 向 singleFieldData 添加一个 id，我正在使用类似 "componentDidMount" 的 useEffect 并使用空括号，但我收到此警告：

/src/components/FormBuilderPage/utils/FieldGenerator.js
  Line 64:6:  React Hook useEffect has a missing dependency: 'singleFieldData'. Either include it or remove the dependency array. You can also do a functional update 'setSingleFieldData(s => ...)' if you only need 'singleFieldData' in the 'setSingleFieldData' call  react-hooks/exhaustive-deps

将 singleFieldData 添加到依赖关系中不起作用，因为我只希望它在渲染时运行一次，我应该怎么做才能消除该警告

Answer 1

想引用prevState时，ReactuseState提供了一个回调函数版本，你必须要用到：

useEffect(() => {
    setSingleFieldData(prevSingleFieldData => ({
        ...prevSingleFieldData, id: uuidv4() 
    }));
}, []);

Docs - Functional updates

有一种情况，你可以在设置初始状态时这样做。

带钩子的 useEffect 给我一条警告信息

useEffect with hook gives me a warning mesage

reactjs

react-hooks

use-effect