如何在 useEffect Hooks 中使用 formik setFieldValue。这将创建一个无限循环

Question

我在请求api后需要使用setFieldValue将数据放入formik，所以我使用useEffect hooks，但是如果我在第二个参数中传入我定义的formik，会造成死循环。如果我不通过它，将会产生一个警告， 这是不允许的。那么我该如何解决它。

const formik = useFormik({
    initialValues: {
      dataList: [],
    },
    onSubmit: (values) => {
      searchFormSubmit(values);
    },
  });

  useEffect(() => {
    const { employeeListQuery, pageSize, page } = paginationObj;
    getMemberFunctionalityWithLimit({
      page,
      limit: pageSize,
      employeeListQuery,
    })
      .unwrap()
      .then(({ payload }) => {
        formik.setFieldValue('dataList', payload.employeeList);
      })
      .catch((error) => {
        console.log(error);
      });
  }, [formik, getMemberFunctionalityWithLimit, paginationObj]);

还没试过

Answer 1

useEffect 中的依赖项包括

formik

但我认为您想要的是在组件首次加载时调用的 API 调用，在这种情况下，只需使用一个空的依赖项数组：

  useEffect(() => {
    const { employeeListQuery, pageSize, page } = paginationObj;
    getMemberFunctionalityWithLimit({
      page,
      limit: pageSize,
      employeeListQuery,
    })
      .unwrap()
      .then(({ payload }) => {
        formik.setFieldValue('dataList', payload.employeeList);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);