React Formik中如何保存API动态生成的输入框与日期选择器的值？

你当前的问题核心是所有字段共用了同一个日期状态，且没有结合Formik的状态管理能力区分不同组的字段，按照以下方案修改即可：

核心实现逻辑 #

完全依托Formik托管所有表单状态，基于接口返回的apiData动态生成独立的分组字段，避免多组数据共用状态导致的同步异常。

1. 动态生成Formik初始值

// 拿到apiData后生成初始表单值，每组对应两个独立字段
const generateInitialValues = (data) => {
  return data.reduce((prev, item) => {
    // 输入框值用item.id作为唯一key，日期值用item.id+_date作为唯一key
    prev[item.id] = ''
    prev[`${item.id}_date`] = new Date()
    return prev
  }, {})
}

2. 绑定Formik状态渲染动态字段

import { Formik, Form } from 'formik'

// 组件内渲染逻辑
return (
  <Formik
    initialValues={generateInitialValues(apiData)}
    onSubmit={(values) => {
      // 提交时可直接获取所有字段值
      console.log('全量表单值：', values)
      // 如需按业务需求重组为分组结构可二次处理
      const formattedValues = apiData.map(item => ({
        id: item.id,
        name: item.name,
        fee: values[item.id],
        date: values[`${item.id}_date`]
      }))
      // 后续提交接口逻辑直接使用formattedValues即可
    }}
  >
    {({ values, handleChange, setFieldValue }) => (
      <Form>
        {apiData?.map((item) => {
          const feeKey = item.id
          const dateKey = `${item.id}_date`
          return (
            /* map渲染必须加唯一key，同时包裹多元素避免React语法报错 */
            <div key={item.id} className="form-group-wrap">
              <input
                type="number"
                name={feeKey}
                value={values[feeKey]}
                onChange={handleChange}
                placeholder="Fee"
                className="fee-form"
              />
              <DatePicker
                selected={values[dateKey]}
                onChange={(date) => setFieldValue(dateKey, date)}
                className="date-pic-brand-form"
              />
            </div>
          )
        })}
        <button type="submit">提交表单</button>
      </Form>
    )}
  </Formik>
)

注意事项 #

如果apiData是异步接口返回的，需要等接口请求完成拿到数据后再初始化Formik，或者给initialValues设置默认空对象，避免渲染时报错。

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