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

Question

我目前使用 useEffect 钩子来运行某个函数或更新一个变量作为另一个值/变量被更改的效果

例子：

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

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

很明显，当我将“类型”作为依赖项包含在内时，应用程序会陷入循环，并且出现以下错误

Maximum update depth exceeded.

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

Answer 1

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

另一种选择是对依赖项进行字符串化，以便每次都不会将其视为不同的对象。

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

Answer 2

实现变量更新但避免错误的最佳方法是什么？

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

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

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

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

const values = types[formStep];