具有狀態依賴的 useCallback 導致無限循環

Question

我有一個更新狀態的useCallback ，但是因為它需要該狀態作為依賴項，所以它在更新狀態時會創建一個無限循環。 我在這里使用useImmer ，但在使用普通useState時也會發生這種情況。

const [panels, updatePanels] = useImmer({
    activePanel: 0,
    validPanels: [],
});
const onValidatePanel = useCallback(isValid => {
    const panelIndex = panels.validPanels.indexOf(panels.activePanel);

    // Add
    if (panelIndex === -1 && isValid) {
        updatePanels(draft => {
            draft.validPanels.push(draft.activePanel);
        });
    // Remove
    } else if (panelIndex > -1 && !isValid) {
        updatePanels(draft => {
            draft.validPanels.splice(panelIndex, 1);
        });
    }
}, [panels]);

基本上，當添加或刪除索引時， panels發生變化，再次觸發onValidatePanel ，並重新添加索引，然后……

我該如何解決這個問題？

Answer 1

我認為您根本不需要填充依賴項數組，您可以從功能狀態更新程序函數中的draft副本訪問panels狀態。

const onValidatePanel = useCallback(isValid => {
  updatePanels(draft => {
    const panelIndex = draft.validPanels.indexOf(draft.activePanel);

    if (panelIndex === -1 && isValid) {
      // Add
      draft.validPanels.push(draft.activePanel);
    } else if (panelIndex > -1 && !isValid) {
      // Remove
      draft.validPanels.splice(panelIndex, 1);
    }
  });
}, []);