useEffect 进入无限循环

时间:2021-02-09 04:53:32

标签: reactjs react-hooks

const CaptureFormValueContext = () => {
    // Grab values from context
    const { values, setFieldValue } = useFormikContext();
    useEffect(() => {
      if (values.selectedCustomer !== formData.selectedCustomer) {
        const filterConexion = Lo.filter(conexionData, {
          CustomerName: values.selectedCustomer,
        });
        const mapConexionData = MapConexionListDropDown(filterConexion);
        setTimeout(() => {
          setConexionData(mapConexionData);
        }, 500);
        if (values.selectedConexion !== formData.selectedConexion) {
          setFieldValue('selectedConexion', values.selectedConexion);
        } else {
          const val = mapConexionData[0].label;
          setFieldValue('selectedConexion', val);
        }
        console.log('done');
      } else {
        const filterConexion = Lo.filter(conexionData, {
          CustomerName: values.selectedCustomer,
        });
        const mapConexionData = MapConexionListDropDown(filterConexion);
        setTimeout(() => {
          setConexionData(mapConexionData);
        }, 500);
        setFieldValue('selectedConexion', values.selectedConexion);
      }
    }, [values, setFieldValue]);

    return null;
  };

以上是函数,我用来根据客户过滤值。在这里,我正在做的是我从过滤器的客户下拉列表中选择客户,并基于该客户,我将尝试过滤器 conexion。我能够过滤值。但最终在过滤值之后。

useEffect 进入无限循环,它不断使用相同的值一次又一次地过滤。

谁能告诉我我哪里出错了或者我遗漏了什么?

1 个答案:

答案 0 :(得分:0)

您提到 useEffect 钩子应该只在 values.selectedCustomer 更改时触发。无限循环是由于每次调用钩子时 values 都会发生变化,从而调用另一个钩子调用等等。

要解决这个问题,请尝试使 deps 数组 [values.selectedCustomer] 而不是 [values, setFieldValue]