useEffect 中的循環依賴

Question

我正在嘗試構建一個自定義掛鈎，該掛鈎必須在使用 Formik 的setFieldValue()之前更改值。

下面是鈎子的樣子：

export const useCount = (tab) => {
  const { values, setFieldValue } = useFormikContext();

  const { count} = values;

  useEffect(() => {
    const handleChange = () => {
      if (tab === 0) {
        setFieldValue("count", count);
      } else if (tab === 1) {
        setFieldValue("count", count * 2);
      }
    };

    handleChange();
  }, [count]);
};

手頭的問題是我最終會陷入無限循環，因為我正在更改useEffect()內部的count 。 有什么線索嗎？

Answer 1

替換 useEffect 中的tab count ，僅在tab更改時觸發此效果

export const useCount = tab => {
  const {values: {count}, setFieldValue} = useFormikContext();

  const handleChange = () => {
     if (tab === 0) {
        setFieldValue("count", count);
     } else if (tab === 1) {
        setFieldValue("count", count * 2);
     }
  }

  useEffect(() => {
    handleChange();
  }, [tab]);
};