使用Formik动态绑定数组对象时输入框值无法更新的问题求助

你的问题出在混用了独立的useState和Formik的状态管理，而且输入框的name属性没正确指向数组中的具体项，导致Formik无法定位到要更新的字段，自然输入值不会同步。

正确的做法：用Formik统一管理数组状态 #

放弃单独的useState，把车辆列表放到Formik的initialValues里，让Formik全权处理状态更新，步骤如下：

1. 初始化Formik，包含车辆数组

import { useFormik } from 'formik';

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      vehicles: [{ make: "", model: "", year: "" }] // 初始一条空数据
    },
    onSubmit: (values) => {
      // 提交时处理表单数据，比如发请求
      console.log('表单数据:', values);
    }
  });

2. 实现新增条目功能
   通过Formik的setFieldValue方法追加新的空对象到数组：

const addVehicle = () => {
  const updatedVehicles = [
    ...formik.values.vehicles,
    { make: "", model: "", year: "" }
  ];
  formik.setFieldValue('vehicles', updatedVehicles);
};

3. 渲染动态输入框，正确设置name属性
   遍历Formik管理的vehicles数组，每个输入框的name要写成vehicles[索引].字段名的格式，让Formik能精准定位到数组中的具体项：

{formik.values.vehicles.map((vehicle, i) => (
  <div key={i} style={{ marginBottom: '16px' }}>
    <TextField
      fullWidth
      label="Make"
      name={`vehicles[${i}].make`}
      onBlur={formik.handleBlur}
      onChange={formik.handleChange}
      value={vehicle.make}
      variant="outlined"
    />
    <TextField
      fullWidth
      label="Model"
      name={`vehicles[${i}].model`}
      onBlur={formik.handleBlur}
      onChange={formik.handleChange}
      value={vehicle.model}
      variant="outlined"
      style={{ margin: '8px 0' }}
    />
    <TextField
      fullWidth
      label="Year"
      name={`vehicles[${i}].year`}
      onBlur={formik.handleBlur}
      onChange={formik.handleChange}
      value={vehicle.year}
      variant="outlined"
    />
  </div>
))}

4. 添加新增按钮和提交按钮

<button onClick={addVehicle} style={{ marginRight: '8px', padding: '8px 16px' }}>
  新增车辆
</button>
<button onClick={formik.handleSubmit} style={{ padding: '8px 16px' }}>
  提交表单
</button>

为什么之前的方法失效？ #

你用useState单独维护vehicles，但输入框绑定的是Formik的handleChange——这个方法只会更新Formik内部的values状态，不会同步到你自己的vehicles数组，所以输入框的值始终是初始的空字符串，看起来就像没输入一样。

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