React useReducer中如何映射对象数组并更新指定字段？

问题分析 #

你的代码存在三个核心问题，导致map不执行且状态无更新：

1. 初始state为空数组：useReducer初始值是[]，空数组调用map不会触发回调函数，因此看不到"I SHOULD RETURN SOMETHING BUT I DONT"的日志；后续若未先填充数组内容，map依然不会执行。
2. 未接收map的返回值：state.map(...)会返回新数组，但你未接收该结果，最后直接返回原state，等于完全没更新状态。
3. 字段更新逻辑错误：你要修改的是value字段，但代码里写的是[e.target.name]:obj.value，这相当于用输入框name作为键，值还是原来的value，等于没做任何修改。

修正后的代码 #

1. 修复reducer函数

const formReducer = (state, e) => {
    console.log("I AM RUNNING")
    // 处理初始空数组的情况：生成第一个输入项的状态对象
    if (state.length === 0) {
        return [{
            name: e.target.name,
            value: e.target.value,
            type: e.target.type
        }];
    }
    // 接收map返回的新数组，作为新state返回
    return state.map((obj) => {
        console.log("I SHOULD RETURN SOMETHING BUT I DONT")
        if (obj.name === e.target.name) {
            console.log("OBJ EXISTS", obj)
            // 正确更新value字段为输入框的当前值
            return {...obj, value: e.target.value}
        } else {
            console.log("NO MATCH", obj)
            return obj
        }
    });
}

2. 初始化state（可选但推荐）

如果希望页面加载时就根据表单配置生成初始状态，可以把useReducer的初始值改成从formBlocks生成：

// 从formBlocks的inputs提取数据，生成初始状态数组
const initialFormData = formBlocks.flatMap(block => 
    block.inputs.map(input => ({
        name: input.name,
        value: input.defaultValue || "",
        type: input.type
    }))
);

const [formData, setFormData] = useReducer(formReducer, initialFormData);

关键注意点 #

• 永远不要直接修改原state：React要求状态不可变，必须返回新的数组/对象。
• 空数组的map不会执行回调，所以一定要处理初始空状态的情况，或者提前初始化state。
• 更新字段时要明确目标字段，比如这里要修改的是value，不是用name作为动态键。

内容的提问来源于stack exchange，提问作者Colton Van Bastelaere