Redux更新对象数组指定元素值后出现[undefined,undefined]错误求助

问题描述 #

需要更新chats数组中chatId为1的对象的animatedPhotoUrl值，原始数组如下：

const chats = [
  {"admin": "590", "animatedPhotoUrl": "", "chatId": "1"},
  {"admin": "680", "animatedPhotoUrl": "", "chatId": "2"},
  {"admin": "420", "animatedPhotoUrl": "", "chatId": "2"}
]

执行dispatch后，console.log(chats)得到错误结果[undefined, undefined]。

Dispatch代码：

dispatch({
  type: "UPDATE_CHAT_PROFILE_PICTURE_URL",
  payload: {
    profilePictureUrl: res.imageUrl,
    animatedPhotoUrl: "",
    chatId: chat.chatId,
  },
});

Reducer代码：

case "UPDATE_CHAT_PROFILE_PICTURE_URL":
  return {
    ...state,
    chats: state.chats.map((chat) => {
      chat.chatId === action.payload.chatId
        ? {
            ...chat,
            animatedPhotoUrl: action.payload.animatedPhotoUrl,
          }
        : chat;
    }),
  };

错误原因 #

问题出在map函数的回调里：你用了带大括号的箭头函数，但没有显式返回三元表达式的结果。箭头函数如果包含大括号，必须手动写return语句，否则每个迭代都会默认返回undefined，最终整个chats数组就变成了全undefined的数组。

解决方案 #

有两种修正方式：

方式1：去掉箭头函数的大括号，利用箭头函数自动返回特性 #

case "UPDATE_CHAT_PROFILE_PICTURE_URL":
  return {
    ...state,
    chats: state.chats.map((chat) => 
      chat.chatId === action.payload.chatId
        ? {
            ...chat,
            animatedPhotoUrl: action.payload.animatedPhotoUrl,
          }
        : chat
    ),
  };

方式2：在三元表达式前添加return关键字 #

case "UPDATE_CHAT_PROFILE_PICTURE_URL":
  return {
    ...state,
    chats: state.chats.map((chat) => {
      return chat.chatId === action.payload.chatId
        ? {
            ...chat,
            animatedPhotoUrl: action.payload.animatedPhotoUrl,
          }
        : chat;
    }),
  };

两种方式都能让map正确返回处理后的对象，避免数组变成全undefined。

内容的提问来源于stack exchange，提问作者d-dripz