React表单输入数据后报form.map is not a function错误如何解决

• 核心问题是form的类型在第一次表单输入时被非法修改：
  1. 初始声明的form是数组类型，未触发输入时状态未变，所以调用map方法正常
  2. onChange方法中更新form的逻辑错误：你用对象语法{...previousForm}包裹返回值，直接把原本的数组类型转换成了普通对象类型，更新完成后form不再是数组，自然没有map方法，触发类型错误
  3. 现有更新逻辑是直接把表单字段挂载到状态根层级，而非对应到数组中每个洞的对象里，即便类型没问题，后续取值也会和预期不符

修改onChange方法的状态更新逻辑，保证始终返回数组类型，且精准更新对应洞的对应字段，参考代码如下：

const onChange = (event) => {
    const { value, name } = event.target;
    // 从字段名中提取洞的序号，比如par1提取1、stroke12提取12
    const holeNum = name.match(/\d+$/)[0];
    const targetIndex = Number(holeNum) - 1;

    setForm((previousForm) => {
        // 拷贝原数组避免直接修改状态
        const newForm = [...previousForm];
        // 更新对应索引下的对应字段
        newForm[targetIndex] = {
            ...newForm[targetIndex],
            [name]: value
        };
        // 始终返回数组类型
        return newForm;
    });
  
    setErrors((previousErrors) => {
        return {
            ...previousErrors,
            [name]: undefined
        };
    });
};

注意事项 #

• 确保所有输入框的name属性和初始状态的字段名格式完全匹配，比如第1洞的par字段name为par1、第10洞的码数字段name为yards10
• 后续更新form状态时，永远返回数组类型，不要用对象包裹返回值

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