React Context多状态场景下表单initialErrors初始值无法正常设置问题

DevOps 小满

2026-9-28

问题根因

useState 的初始值参数仅在组件首次挂载渲染时生效，后续props传入的值变化不会自动更新内部状态，你的场景刚好触发了这个特性：

Login组件首次渲染时，内部的error状态没有设置初始值，为undefined，此时传入ZForm的initialErrors就是undefined，所以ZForm内部的errors状态被初始化为undefined
你提交表单调用setError({ password: "test" })后，Login组件重新渲染，此时传给ZForm的initialErrors已经变成了错误对象，但ZForm内部的errors是独立的内部状态，不会因为props的initialErrors变化而自动更新，这就是你看到console打印errors始终不对的原因。
至于你注释里提到的initialValues未生效，大概率是你写反了注释：你传入的initialValues是固定的字面量对象，首次渲染就有值，所以form状态初始化是正常的，不正常的是errors状态。

修复方案

根据你的使用场景可以二选一：

方案1：错误状态由ZForm内部完全管理（推荐，通用表单组件的常规设计）

你不需要在Login组件里单独维护error状态，直接把修改errors的方法暴露到FormContext里，在Login的提交逻辑里调用即可：
修改ZForm代码：

import React, { useState } from "react";

export const FormContext = React.createContext();

const ZForm = ({ children, initialValues, initialErrors }) => {
  const [errors, setErrors] = useState(initialErrors);
  // 建议修改form状态用函数式更新，避免闭包导致的更新异常
  const [form, setForm] = useState(initialValues);

  const handleFormChange = (event, validators) => {
    const { name, value } = event.target;
    setForm(prev => ({ ...prev, [name]: value }));
  };

  // 新增修改errors的方法，暴露到context
  const setFormErrors = (newErrors) => {
    setErrors(newErrors);
  };

  return (
    <form>
      <FormContext.Provider
        value={{
          form,
          errors,
          handleFormChange,
          setFormErrors
        }}
      >
        {children}
      </FormContext.Provider>
    </form>
  );
};

export default ZForm;

修改Login组件代码：

function Login() {
  // 移除内部维护的error状态
  function handleLogin({ email, password }) {
    // 从context中拿到setFormErrors方法调用即可更新表单错误
    setFormErrors({ password: "test" });
  }

  return (
    <div className="page" style={{ justifyContent: "center" }}>
      <div className="inlineForm">
        <h3>Login</h3>
        {/* 不需要再传initialErrors，有初始错误需求时再传即可 */}
        <ZForm
          initialValues={{ email: "", password: "" }}
        >
          <Grid container spacing={4}>
            <Grid item xs={12} md={12}>
              <ZTextField label="Email" name="email"></ZTextField>
            </Grid>
            <Grid item xs={12} md={12}>
              <ZTextField label="Password" name="password"></ZTextField>
            </Grid>
          </Grid>
          <Grid item xs={12}>
            <FormActionButtons
              onSave={handleLogin}
            ></FormActionButtons>
          </Grid>
        </ZForm>
      </div>
    </div>
  );
}

export default Login;

方案2：错误状态由外部父组件控制

如果你确实需要在父组件维护错误状态，不需要在ZForm内部单独存errors，直接把props传入的initialErrors作为context的errors值即可：

const ZForm = ({ children, initialValues, initialErrors }) => {
  const [form, setForm] = useState(initialValues);

  const handleFormChange = (event, validators) => {
    const { name, value } = event.target;
    setForm(prev => ({ ...prev, [name]: value }));
  };

  return (
    <form>
      <FormContext.Provider
        value={{
          form,
          errors: initialErrors, // 直接使用props传入的错误值
          handleFormChange,
        }}
      >
        {children}
      </FormContext.Provider>
    </form>
  );
};

临时兼容方案：同步props的initialErrors到内部状态

如果你既要保留ZForm内部管理errors的能力，又要支持外部修改initialErrors的时候同步更新，就加useEffect监听initialErrors的变化：

import React, { useState, useEffect } from "react";

const ZForm = ({ children, initialValues, initialErrors }) => {
  const [errors, setErrors] = useState(initialErrors);
  const [form, setForm] = useState(initialValues);

  // 新增useEffect同步外部传入的initialErrors
  useEffect(() => {
    setErrors(initialErrors);
  }, [initialErrors]);

  // 其余原有代码不变
};

内容的提问来源于stack exchange，提问作者a2ron44