如何防止這種無限循環？

Question

我需要在 useEffect 的 arguments 中傳遞 foo ，以便它可以使用現有的數組值。 所以我在這個數組中設置了新值，但是當我去設置值時，它會再次從 userEffect 調用 f() function。 我如何擺脫這個無限循環？

虛構的代碼示例如下所示：

const [foo, setFoo] = useState<MyType>(...);

const f = () => {
    const baa = {...foo};
    for(...) {
        foo.arr[x] = y;
    }
    setFoo(foo);
}

useEffect(() => {
    f();
    g();
    // ...
}, [foo]);

Answer 1

JavaScript 函數可以訪問它們上面的 scope 中的變量，因此您不需要將 foo 作為參數傳遞給這些函數中的任何一個。

在 useEffect 中將 foo 作為參數傳遞意味着每次 foo 更改時我們都會調用 useEffect。 這就是導致您的無限循環的原因，而且您似乎不想在每次 foo 更改時都調用它，所以我將其排除在外

Answer 2

每當它們的依賴項被初始化或更改時，效果掛鈎就會運行。 更改掛鈎中的 state 依賴項意味着您最終會陷入無限循環。

我懷疑你想要某種從foo派生的計算值。 為此，有一個備忘錄鈎子，它會在每次其依賴關系發生變化時計算新值。

const fooWithBenefits = useMemo(
  () => ({
    ...foo,
    arr: [...foo.arr.slice(0, x), y, ...foo.arr.slice(x + 1)],
  }),
  [foo]
);

然后，您將在組件中使用fooWithBenefits而不是foo 。