如何使用Redux修改数组对象中的用户账户信息？

核心问题分析 #

你的代码有两个关键错误导致状态返回undefined且无变化：

1. Reducer返回结构错误：EDIT_ACCOUNT分支直接返回了map后的数组，破坏了原state的对象结构（原state是包含userAccounts数组的对象），导致后续读取state.userAccounts时得到undefined。
2. Map函数未处理不匹配项：遍历数组时，只有匹配id的项被处理，不匹配的项没有返回原数据，导致数组中出现undefined元素。

修复后的Reducer代码 #

const registerReducer = (state = initialState, action) => {
  switch (action.type) {
    case REGISTER:
      return {
        ...state,
        userAccounts: [...state.userAccounts, action.payload],
      };
    case EDIT_ACCOUNT:
      // 保持原state结构，仅更新userAccounts数组
      return {
        ...state,
        userAccounts: state.userAccounts.map((account) => {
          if (account.id === action.payload.id) {
            // 合并原账户数据和新的修改字段
            return {
              ...account,
              fullname: action.payload.fullname
            };
          }
          // 不匹配时返回原账户，避免出现undefined
          return account;
        })
      };
    default:
      return state;
  }
};

优化编辑页面的dispatch逻辑 #

用fullname查找索引存在同名用户的风险，建议增加容错处理，同时简化代码：

const handleChangeInfo = () => {
  const targetAccount = userAccounts.find(item => item.fullname === params.name);
  if (!targetAccount) return; // 避免找不到用户时触发错误
  
  dispatch(editAccount({
    id: targetAccount.id,
    fullname: value,
  }));
  navigation.goBack();
};

额外说明 #

如果后续需要编辑更多字段（如邮箱、密码），只需在action的payload中传入对应字段，然后在reducer中改成return {...account, ...action.payload}即可，无需逐个字段声明。同时要确保EDIT_ACCOUNT的type常量在action和reducer中拼写一致。

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