带钩子的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添加到dependency中是不起作用的，因为我只希望它在渲染时运行一次，我应该怎么做才能消除警告

Answer 1

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

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

文档-功能更新

有一种情况是，您可以在设置初始状态本身时执行此操作。