javascript - React Hook useEffect 在添加缺少的依赖项时进入无限循环

Question

当我在看这个例子的时候https://codesandbox.io/s/miniformik-v2-with-react-hooks-io0me它告诉我缺少依赖项，VS Code 会自动插入依赖项(验证函数)。由于它进入无限循环，它使应用程序崩溃。

如果我将验证函数放在 useEffect 中，它可能会起作用，但验证函数会在其他地方使用。你打算怎么办？您是重构没有这种情况的整个代码还是忽略详尽的 deps 警告？

老实说，我可以只将 state.values 作为 deps，但是 hook 规则，详尽的 deps 一直在提示。

  React.useEffect(
    () => {
      if (validate) {
        const errors = validate(state.values);
        dispatch({ type: 'SET_ERRORS', payload: errors });
      }
    },
    [state.values]
  );

我试图通过在 useCallback 中调用验证来解决它，但似乎不起作用。

  const callbackValidate = useCallback((values) => {
      validate(values);
    },
    []
  );

Answer 1

所以你的流程看起来像这样:

您可以这样调用 useFormik Hook :

 useFormik({
    validate: values => {
      let errors = {};
      if (values.name !== 'admin') {
        errors.name = 'You are not allowed';
      }
      return errors;
    },
  });

这将为每个渲染创建一个新的验证函数。如果您现在将验证函数放入 useEffect 中，它将在每次渲染时都有不同的引用，因为它是一个新函数。这将触发验证功能，该功能将触发新的渲染并再次开始。

您必须在组件外部使用静态函数或使用 useCallback ，它将返回一个内存函数，它的引用只会在它的参数改变时改变。

希望这对您有所帮助。