React项目中Formik无法渲染初始值问题求助

核心问题分析 #

初始值无法渲染的关键原因有两个：

1. 手动设置value切断了Formik的状态控制 #

你代码中mk1到mk4的TextInput手动指定了value={mKeys[0]}这类属性，这会直接覆盖Formik对输入框值的管理——Formik的initialValues无法注入到输入框，因为输入框的值被硬编码为mKeys的内容。

2. 表单组件未关联Formik的状态处理逻辑 #

如果你的TextArea、TextInput不是Formik官方的Field组件，也没有手动绑定Formik提供的values和handleChange，Formik就无法将初始值同步到表单控件上。

具体修复步骤 #

步骤1：移除手动设置的value属性 #

删掉mk1到mk4的TextInput上的value属性，让Formik接管值的控制：

<TextInput name="mk1" id={1} />
<TextInput name="mk2" id={2} />
<TextInput name="mk3" id={3} />
<TextInput name="mk4" id={4} />

步骤2：手动绑定Formik状态（适用于普通组件） #

在Formik的children函数中添加values和handleChange参数，绑定到所有表单组件上：

{({ isSubmitting, submitForm, isValid, errors, values, handleChange }) => (
  <Form className="ui form">
    <TextArea
      name="comments"
      placeholder="Enter Comments Here"
      rows={10}
      value={values.comments}
      onChange={handleChange}
    />
    {/* 数字输入框同理 */}
    <TextInput 
      name="mk1Num" 
      type="number" 
      value={values.mk1Num} 
      onChange={handleChange} 
    />
    {/* 其余TextInput都添加value和onChange绑定 */}
  </Form>
)}

步骤3：改用Formik的Field组件（更简洁的方案） #

Formik的Field组件会自动处理值绑定和变更逻辑，只需指定name即可，无需手动写value和handleChange：

import { Field } from 'formik';

// 替换原有TextArea
<Field as="textarea" name="comments" placeholder="Enter Comments Here" rows={10} />

// 替换原有TextInput
<Field name="mk1" as={TextInput} id={1} />
<Field name="mk1Num" as={TextInput} type="number" />

如果是自定义TextInput组件，确保它接受value和onChange属性，Field会自动传递这些属性。

步骤4：处理异步初始值的情况 #

如果submittedAssignment或mKeys是异步获取的，组件首次渲染时initialValues可能为空，后续更新时Formik不会自动重新初始化。此时需要给Formik添加enableReinitialize={true}属性：

<Formik
  initialValues={initialValues}
  enableReinitialize={true} // 允许initialValues变化时重新初始化
  validationSchema={Yup.object({/* ... */})}
  // 其他属性
>

额外注意事项 #

• Select组件的name="mk"不在initialValues中，会触发Formik警告。如果这个选择器是用来控制mKeys的，建议单独处理它的状态，不要纳入Formik表单；如果需要纳入，把mk添加到initialValues中。
• 确保mKeys在计算initialValues时已经有正确值，如果是异步加载的，要等数据加载完成后再渲染Formik组件。

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