React/Redux中如何更新对象数组中的指定值？

嘿，刚接触Redux就敢在项目里实践，这步走得很扎实！我看你在STUDENT_CHECK_IN_SUCCESS的reducer逻辑里踩了个小坑，咱们来一步步把它修正过来～

先说说你当前写法的问题 #

你现在的代码里，...state.students[updatedStudent]这部分逻辑不对：state.students是一个包含loading、error、data的对象，不是数组，所以不能用索引去访问它。而且直接把data改成{ status:'in' }会把整个学生数组替换成一个单独的对象，这显然不是你想要的结果。

正确的实现方式 #

我们要遵循Redux的不可变更新原则，也就是不能直接修改原state，而是要创建新的对象/数组来替换需要更新的部分。具体步骤如下：

1. 找到目标学生在data数组中的索引（你用findIndex的这部分是对的）
2. 复制原有的data数组，找到对应索引的学生对象，创建一个新的对象，保留原有属性的同时更新status为'in'
3. 保留students对象里的loading、error等其他属性，只替换更新后的data数组

下面是修正后的STUDENT_CHECK_IN_SUCCESS代码：

case "STUDENT_CHECK_IN_SUCCESS":
  // 找到目标学生的索引
  const studentIndex = state.students.data.findIndex(student => student.id === action.payload);
  // 如果找到对应学生，才进行更新
  if (studentIndex !== -1) {
    // 复制原data数组，创建新数组
    const updatedData = [...state.students.data];
    // 创建新的学生对象，替换原数组中的对应项
    updatedData[studentIndex] = {
      ...updatedData[studentIndex],
      status: 'in'
    };
    // 返回新的state结构
    return {
      ...state,
      students: {
        ...state.students, // 保留loading、error等原有属性
        data: updatedData, // 替换为更新后的数组
        loading: false // 请求成功后把loading设为false
      }
    };
  }
  // 如果没找到学生，直接返回原state
  return state;

额外的小优化 #

• 记得在请求成功后把loading设为false，这样UI层可以正确结束加载状态
• 加上studentIndex !== -1的判断，避免因为找不到学生而出现错误

另外，你的studentCheckInStart action定义时接收了student参数，但调用时没传，不过这部分不影响核心逻辑，你可以根据需要调整～

内容的提问来源于stack exchange，提问作者Jaime Ivy Arrestinya Pendlebur