在渲染道具中调用的 setState 导致反应警告

Question

我有以下组件，它接受一个将值传递给子组件的渲染道具。 Here 是一个显示问题的代码框。按提交并查看控制台。

这是组件：

export const FormContainer = function FormContainer<V>({
  initialValues,
  validate,
  render,
  ...rest
}: FormContainerProps<V>) {
  const [hasValidationError, setHasValidationError] = useState(false);
  const dispatch = useDispatch();

  useEffect(() => {
    if (!hasValidationError) {
      return;
    }

    scrollToValidationError();

    () => setHasValidationError(false);
  }, [hasValidationError]);

  return (
    <>
      <Formik
      >
        {({
          isSubmitting,
          submitCount,
          isValid,
          errors,
          values,
        }: FormikProps<V>) => {
          const invalid = !isValid;
          const submitted = submitCount > 0;

          if (submitCount > 0 && invalid) {
            setHasValidationError(true);
          }

          return (
            <>
              <Form>
                  <div className={styles.form}>
                    {render({
                      values,
                      errors,
                      isSubmitting,
                      invalid,
                      submitCount,
                    })}
                  </div>
              </Form>
            </>
          );
        }}
      </Formik>
    </>
  );
};

如果存在验证错误，则调用 setHasValidationError，这会导致 react 出现此错误

Warning: Cannot update a component (`FormContainer`) while rendering a different component (`Formik`). To locate the bad setState() call inside `Formik`, follow the stack trace as described in 
    in Formik (created by FormContainer)
    in FormContainer (created by Home)
    in Home (created by Context.Consumer)
    in Route (created by App)
    in Switch (created by App)
    in Router (created by App)
    in App

我并不是说这个警告是错误的。在这里调用 setHasValidationError 似乎并不理想，但在初始 useEffect 钩子中调用的 scrollToValidationError(); 调用是异步的，它需要超出渲染函数。

我能做什么？

Answer 1

为了避免 Formik 出现这个问题，您可以将状态调用包装在 setTimeouts 中，这样应该可以解决问题：

        setTimeout(() => setHasValidationError(true), 0);

这也是 Formik 在其官方文档中所做的。这是他们有一段时间的问题，诀窍是让状态更新在下一个周期滴答时运行。

另见：https://github.com/jaredpalmer/formik/issues/1218

Answer 2

我认为阿里使用setTimeout 的回答是合法的。我想补充一点，useEffect 是 IMO 更好的解决方案。因为它进一步防止了在组件卸载后调用 setHasValidationError 时不太可能但仍然可能的错误情况。

（eslint 天真地抱怨 useEffect 在这里使用不安全，但我检查了 source code 完全没问题。）

// here I rename useEffect to mute eslint error
const nextTick = useEffect;

<Formik>
  {({
    isSubmitting,
    submitCount,
    isValid,
    errors,
    values
  }: FormikProps<V>) => {
    const invalid = !isValid;

    nextTick(() => {
      if (submitCount > 0 && invalid) {
        setHasValidationError(true);
      }
    }, [submitCount, invalid]);

    // ...
  }
</Formik>