reactjs - 带钩子的 useEffect 给了我一个警告信息

Question

我正在尝试实现这一点：

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

基本上，当组件加载我想使用 uuidv4 添加到 singleFieldData 一个 id 时，我使用 useEffect （如“componentDidMount”）并使用空括号，但我收到此警告：

/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 添加到依赖项不起作用，因为我只希望它在渲染时运行一次我应该怎么做才能摆脱该警告

标签： reactjsreact-hooksuse-effect

Answer 1

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

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

文档 - 功能更新

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