如何更新嵌套状态数组然后返回整个数组反应答案

【问题标题】：how to update nested state array and then return the entire array react如何更新嵌套状态数组然后返回整个数组反应
【发布时间】：2021-12-01 02:42:53
【问题描述】：

我正在使用 React Hooks。这是我的状态：

const [ chats, setChats ] = useState()

我的“聊天”状态中有这个数组：

[
    {
        "messages": [ //I refer this field
            {
            "message": "hi",
            "seen": false,
            "_id": "61658b533da2d51eace71b31",
            "user": {"user data"}
            }
        ],
        "users": ["some data"],
        "avatar": "data",
        "_id": "61634b62c1a7612f04296335",
        "type": "private"
        },
    {
      "messages": [],
      "users": ["some data"],
      "avatar": "data",
      "_id": "616355d7e124771d98426240",
      "type": "private"
    }
]

所以我只需要用这个newMessage 对象从那个“聊天”数组的“0”元素中更新“消息”字段：

{
  "message": "another hi",
  "seen": false,
  "_id": "61658f551ccbac34a8d10130",
  "user": {"some user data"}
}

我尝试了最流行的答案，但它只返回“消息”字段，我需要返回整个数组。

代码：

setChats([...chats[currentlyChatIndex].messages, newMessage])

【问题讨论】：

我使用immutable-js 作为列表，它会创建一个全新的对象并对更新做出反应
像这样更新更复杂的数据结构，比useState更适合useReducer。如果您在熟悉之前使用过 Redux，请参阅 react docs。

标签： javascript arrays reactjs react-hooks use-state

【解决方案1】：

您可以映射数组，如果您位于 currentlyChatIndex，则可以附加 messages 字段。

示例

const data = [
    {
      "messages": 
      [
          {
            "message": "hi",
            "seen": false,
            "_id": "61658b533da2d51eace71b31",
            "user": "user data"
          }
      ],
      "users": ["some data"],
      "avatar": "data",
      "_id": "61634b62c1a7612f04296335",
      "type": "private"
    },
    {
      "messages": [],
      "users": ["some data"],
      "avatar": "data",
      "_id": "616355d7e124771d98426240",
      "type": "private"
    }
]

const addMessage = (index, message) => {
  return data.map((el, i) => i === index ? {...el, messages: [...el.messages, message]} : el)
}

console.log(addMessage(0, {message: 'another hi'}))

你的情况

setChats(chats => chats.map((chat, index) => index === currentlyChatIndex ? 
     { ...chat, messages: [...chat.messages, newMessage] } : chat))

【讨论】：

哇，谢谢！！！它对我有用