避免 react-hooks/exhaustive-deps 的最佳方法是什么？

Question

我目前使用 useEffect 挂钩运行一些函数或更新一个变量作为另一个 value/variable 被改变的效果

示例：

 useEffect(() => {
   setValues(types[formStep]]);
 }, [formStep]);

我正在使用上面的代码在另一个变量更改后更新一个变量，但是我不断收到警告
React Hook useEffect has a missing dependency 'types

并且很明显，当我将 'types' 作为依赖项包含时，应用程序陷入循环，并且出现以下错误

Maximum update depth exceeded.

实现变量更新又避免错误的最佳方法是什么？不仅适用于此示例，还适用于您需要根据之前更改的另一个变量更新变量的所有情况。

Answer 1

What is the best way to achieve the variable update but avoid the error?

这取决于很多因素：有时使用 ref（如果你不想触发更新），有时你只是派生状态而不需要 use-effect（我认为这可能是你的情况），其他时候你只需要在某些值发生变化时触发更新......有时下一个值取决于前一个值所以你应该使用 setState 的函数重载并避免将先前的值作为依赖项传递...这个问题没有通用的答案。

如果没有更多上下文，很难知道您的案例中发生了什么。但是，我认为我知道可能会发生什么......这只是在黑暗中的一个镜头。

types是您在组件函数内部定义的对象吗？你能把这个定义移到组件的功能之外吗？因为如果你能做到这一点，那么就没有必要将它作为依赖项传递。

还有，你真的需要用useState和useEffect来设置values吗？您真的需要触发另一个更新吗？你不能这样做吗？

const values = types[formStep];

Answer 2

在这里找到了一些解决方案：https://www.benmvp.com/blog/object-array-dependencies-react-useEffect-hook/。

另一种选择是将依赖项字符串化，这样它就不会每次都被视为不同的对象。

useEffect(() => {}, [JSON.stringify(data)])

避免 react-hooks/exhaustive-deps 的最佳方法是什么？

What's the best way to avoid react-hooks/exhaustive-deps?

javascript

reactjs

react-hooks

use-effect