Formik选择学生后用setFieldValue动态赋值FieldArray schedule及map报错修复

问题根因 #

你遇到的报错是以下几个代码错误共同导致的：

• 变量名引用错误：你用useState声明的学生数据存储变量是studentSchedule，但后续查找选中学生、渲染下拉选项时都写成了不存在的schedule变量，无法拿到正确的学生日程数据。
• 赋值路径错误：你调用setFieldValue时错误给schedule.step赋值，直接把原本是数组类型的schedule字段改写为了带step属性的对象，对象不存在map方法，所以渲染FieldArray时触发类型错误。
• 字段不匹配：接口返回的学生数据中，schedule本身就是日程数组，不存在step子字段，赋值时不需要加.step后缀。

修复方案 #

你只需要修改Field下拉选择组件的onChange逻辑，以及变量引用的地方即可，核心修改后的代码如下：

// 下拉选择组件修改部分
<Field
  className="form-control"
  as="select"
  name="id"
  onChange={(event) => {
    handleChange(event);
    // 修正变量名，从studentSchedule里找选中的学生
    const selectedStudent = studentSchedule.find(
      (item) => item.id === event.target.value
    );
    if (selectedStudent) {
      // 直接把选中学生的日程数组完整赋值给formik的schedule字段
      setFieldValue('schedule', selectedStudent.schedule);
    }
  }}
>
  <option value="" defaultValue disabled>
    ...
  </option>
  {/* 修正变量名，遍历studentSchedule渲染选项 */}
  {studentSchedule &&
    studentSchedule.map((i) => (
      <option key={i.id} value={i.id}>
        {i.name}
      </option>
    ))}
</Field>

如果需要选中学生时保留之前手动新增的日程，只需要把赋值逻辑改为setFieldValue('schedule', [...values.schedule, ...selectedStudent.schedule])即可。

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