Question

在查看本示例https://codesandbox.io/s/miniformik-v2-with-react-hooks-io0me时，它告诉我缺少依赖项，并且VS Code自动插入依赖项（验证函数）。而且由于进入无休止的循环，它使应用程序崩溃。

如果我将validate函数放在useEffect内，它可能会起作用，但是validate函数在其他地方使用。你最近怎么样您是否重构了没有这种情况的整个代码，或者只是忽略了详尽的deps警告？

老实说，我可以只将state.values作为dep，但是钩子规则，详尽的deps总是让人抱怨。

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

我试图通过在useCallback内部调用validate来解决它，但似乎不起作用。

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

Answer 1

所以您的流程如下：

您可以这样调用useFormik钩子：

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

这将为每个渲染创建一个新的验证功能。如果现在将您的validate函数放入useEffect中，由于它是一个新函数，因此在每个渲染器上都会有不同的引用。这将触发validate函数，该函数将触发新的渲染，然后重新启动。

您必须在组件外部使用静态函数或使用useCallback，后者将返回一个已记忆的函数，并且其引用仅在其参数更改时才会更改。

希望这会有所帮助。

Answer 2

使用useCallback时，应确保提供的secound参数保持不变。您可以为每个渲染创建一个新的验证功能

Answer 3

这通过在每个渲染器中使用useRef保留功能来为我工作。

  const validateRef = useRef();
  validateRef.current = () => validate(state.values);

  useEffect(() => {
    const errors = validateRef.current();
    dispatch({ type: "SET_ERRORS", payload: errors });
  }, [state.values]);

在添加缺少的依赖项时，React Hook useEffect陷入无限循环

3 个答案: