React/Redux如何访问并更新reducer中的指定属性？

核心问题整理 #

你的代码存在多处状态结构和逻辑错误，以下是具体问题：

• 状态结构前后不一致：初始state定义为[]数组，但LOAD_BINNACLE_NOTES等case返回的是包含binnacleNotes字段的对象，导致后续所有状态操作的取值逻辑全部异常。
• BINNACLE_NOTE_REVIEW分支返回值错误：你直接返回state.binnacleNotes.map()的执行结果，把整个state替换成了binnacleNotes数组，完全丢失了原有状态的结构，这是你更新后状态结构错乱的直接原因。
• 遍历逻辑冗余且存在多处错误取值：遍历note的过程中不需要再次嵌套遍历整个binnacleNotes数组，同时你错误将reducer函数名notes作为展开对象（正确应该展开当前匹配到的note对象），还错误引用了不存在的action.id、state.notes等字段。
• 重置逻辑不符合状态结构：RESET_BINNACLE_NOTES分支直接返回数组，和后续的对象型状态结构不匹配。

修正后的完整代码 #

import { LOAD_BINNACLE_NOTES, BINNACLE_NOTE_REVIEW, ADD_NEW_NOTE, RESET_BINNACLE_NOTES } from "../Actions/notes.actions";

// 修正初始状态结构，和后续返回结构保持一致
export const notes = (state = { binnacleNotes: [] }, action) => {
   const { type, payload } = action;
   switch (type) {
      case LOAD_BINNACLE_NOTES:
         const { binnacleNotes } = payload;
         return {
            ...state,
            binnacleNotes,
         };
      case ADD_NEW_NOTE:
         const { id, date, binnacle_note, responsible, attachments, constructor_review, super_review, dro_review, timestamp } = payload;
         return {
            ...state,
            binnacleNotes: [
               ...state.binnacleNotes,
               {
                  id,
                  date,
                  binnacle_note,
                  responsible,
                  attachments,
                  constructor_review,
                  super_review,
                  dro_review,
                  timestamp,
               },
            ],
         };
      case BINNACLE_NOTE_REVIEW:
         const { noteNumber, role } = payload;
         // 直接构造要更新的字段名，简化逻辑
         const updateField = `${role}_review`;
         return {
            ...state,
            binnacleNotes: state.binnacleNotes.map(note => 
               note.id === noteNumber ? {...note, [updateField]: 1} : note
            )
         }
      case RESET_BINNACLE_NOTES:
         // 重置为和初始结构一致的对象
         return { binnacleNotes: [] };
      default:
         return state;
   }
};

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