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