React Formik表单API返回null时触发非受控警告如何解决

React 触发非受控组件警告的逻辑非常明确：当表单输入元素的value属性从可追踪的非空值切换为null或undefined时，React会认为组件从受控模式切换为非受控模式，直接抛出警告。
你当前的代码里，初始initialValues的lastName是空字符串，属于合法的受控值；3秒后模拟接口返回的lastName为null，开启enableReinitialize后Formik会直接把这个null值同步给对应name="lastName"的输入框，刚好踩中React的警告触发条件。

你可以根据自己的项目场景选任意一种：

• 数据源层兜底（最推荐）
  拿到接口返回数据后，在更新表单初始值前统一把所有null/undefined的字段值替换为空字符串，从根源避免非法值流入表单：

  useEffect(() => {
    setTimeout(() => {
      const apiData = { firstName: 'api', lastName: null };
      // 统一做空值兜底
      const safeFormValues = Object.fromEntries(
        Object.entries(apiData).map(([key, value]) => [key, value ?? ''])
      );
      setInitialValues(safeFormValues);
    }, 3000);
  }, []);
  

  这种方案逻辑最清晰，不会额外增加表单层的复杂度，适合大部分业务场景。

• 封装通用安全表单组件
  如果项目里大量接口存在返回null的情况，没法每次拿到数据都手动处理，可以封装一层自带空值兜底的Field组件，内部自动把null/undefined转成空字符串：

  import { useField } from 'formik';
  
  const SafeField = ({ name, ...restProps }) => {
    const [fieldProps] = useField(name);
    // 强制把null/undefined转成空字符串，保证输入框始终是受控状态
    return <input {...fieldProps} {...restProps} value={fieldProps.value ?? ''} />;
  };
  

  使用时直接替换原来的Field组件即可，不用修改接口数据处理逻辑。

• Formik层全局转换
  可以通过Formik自带的mapPropsToValues配置，在表单初始化、重新初始化的节点统一处理所有字段的null值，不用单独处理每个接口：

  <Formik
    initialValues={initialValues}
    enableReinitialize
    mapPropsToValues={({ initialValues }) => {
      return Object.fromEntries(
        Object.entries(initialValues).map(([key, val]) => [key, val ?? ''])
      )
    }}
    onSubmit={onSubmit}
    validationSchema={validationSchema}
    validateOnChange={false}
    validateOnBlur={false}
  >
    {/* 原有表单内容不变 */}
  </Formik>
  

避坑提醒：不要试图通过给Yup校验规则加default值解决这个问题，Yup的默认值只在校验、提交阶段生效，表单初始化渲染阶段拿到null值时依然会触发警告。

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