Question

这是我的组件：

const FooComponent = () => {
    const initFoo = {
        attrOne: '',
        attrTwo: '',
        attrThree: '',
    };
    const fooContext = useContext(FooContext);
    const { addFoo, hasFoo, currentFoo } = fooContext;
    const [foo, setFoo] = useState(initFoo);

    useEffect(() => {
        if (hasFoo) {
            setFoo(currentFoo);
        } else {
            setFoo(initFoo);    
        }
    }, [fooContext, currentFoo]);

    ...
    ....
}

我在控制台中看到以下警告

Line 21:8:  React Hook useEffect has a missing dependency: 'initFoo'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

在 useEffect 中传递的数组 initFoo 中添加 [fooContext, currentFoo] 给了我进一步的警告，并且似乎没有修复前一个警告。 fooContext 和 currentFoo 都需要作为数组中的输入，因为只要这两者之一更改值，就需要触发 useEffect 钩子中的功能。

Line 5:11:  The 'initFoo' object makes the dependencies of useEffect Hook (at line 21) change on every render. To fix this, wrap the initialization of 'initFoo' in its own useMemo() Hook  react-hooks/exhaustive-deps

有什么想法可以解决这个问题吗？我试图搜索这个警告弹出的类似案例，但在这里没有找到类似的例子

Answer 1

在您的组件定义中，每次重新渲染时，您都在重新创建变量 initFoo。

React hook linting 不够聪明，无法弄清楚这种情况。它说“嘿，我看到您每次渲染组件时都在创建一个新对象。但是，您不会更新您的 useEffect 回调，该回调只设置一次。因此，如果您的 initFoo 更改如果不更改您的 useEffect，那么您的 useEffect 最终可能会设置旧的 initFoo 值，从而导致错误。"

就您而言，initFoo 每次都是“相同的”。将 initFoo 移出组件定义会阻止它在每个组件渲染时重新创建，因此 React hook linting 看到它永远不会改变，因此 useEffect 回调永远不会基于initFoo 的值发生变化。

另一种选择是内联使用 initFoo：

useState({ attrOne: '', ... });

如果您需要在 useEffect 中复制结果，这里可能不方便。

这也是一个警告，而不是一个错误，如果您出于某种原因希望将声明保留在组件主体中，您可以忽略它。您可以使用注释禁用任何 ESLint 规则，如果您想忽略此警告，请将此行放在您的 useEffect 调用上方：

// eslint-disable-next-line react-hooks/exhaustive-deps

反应警告 - useEffect 缺少依赖项

1 个答案: