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];

避免反应性钩子/力竭下降的最佳方法是什么？

2 个答案: