React+Redux中无法修改嵌套数组的问题求助

问题分析 #

你当前的核心问题是reducer未正确实现嵌套数组的不可变更新，现有写法既没准确定位到目标选项，还破坏了原有数据结构。

正确的Reducer实现 #

我们需要精准定位目标投票项（poll）和选项（option），通过创建数据副本完成不可变更新：

case 'ADD_VOTE':
  // 遍历state中的所有投票项，找到包含目标选项的投票项并更新
  return state.map(poll => {
    // 判断当前投票项是否包含要更新的选项
    const targetOptionExists = poll.options.some(opt => opt.id === action.id);
    if (!targetOptionExists) {
      // 不是目标投票项，直接返回原对象
      return poll;
    }

    // 更新目标投票项的内容
    return {
      ...poll,
      totalParticipants: poll.totalParticipants + 1, // 同步更新总参与人数
      options: poll.options.map(option => {
        if (option.id !== action.id) {
          // 非目标选项，返回原对象
          return option;
        }
        // 目标选项，更新票数和选中状态（可选）
        return {
          ...option,
          vote: option.vote + 1,
          checked: true
        };
      })
    };
  });

原写法的问题点 #

1. 依赖action.values而非state进行更新，违背了Redux reducer基于当前状态生成新状态的原则。
2. optionIndex得到的是一个数组（每个投票项对应目标选项的索引），而非单个目标选项的索引，后续取值逻辑完全错误。
3. nextPoll的写法直接破坏了原有数据结构，且vote: +1属于语法错误，没有基于原选项的票数进行累加。

补充优化建议 #

• 你的action函数可以保留，但触发dispatch时无需传入完整poll数据，只需要传选中的option id即可，reducer可以直接从state中定位到对应投票项。
• 无需使用Immutable.js，ES6扩展运算符(...)结合数组map方法就能满足Redux的不可变更新要求。

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