如何在反應組件狀態下修改對象內的數組

Question

我的應用程序中有以下狀態：

    const [activeChats, setActiveChats] = useState([
        {
          id: 1,
          name: 'Luciana Gutierrez',
          role: 'HR Manager',
          avatar: avatar2,
          messages: [
            {
              content: 'Hola Luciana! Tuviste alguna novedad?',
              received: false,
              date: '9:45 AM'
            },
            {
              content: 'Hola John! Todavía no...',
              received: true,
              date: '10:19 AM'
            },
            {
              content: 'Si tengo alguna otra novedad te comento. Gracias!',
              received: true,
              date: '10:20 AM'
            }
          ]
        },
        {
          id: 2,
          name: 'Micaela Alvarez',
          role: 'Marketing Manager',
          avatar: avatar1,
          messages: [
            {
              content: 'Hola John! Entre qué horarios podrías hoy tener la meeting?',
              received: true,
              date: '9:45 AM'
            },
            {
              content: 'Hola Micaela! Muy bien. Yo puedo de 10 a 17 hs.',
              received: false,
              date: '10:05 AM'
            },
            {
              content: 'Dale, agendé la meeting para hoy a las 14hs.',
              received: true,
              date: '10:15 AM'
            }
          ]
        },
        {
          id: 3,
          name: 'Manuel Hoffman',
          role: 'Business Manager',
          avatar: avatar3,
          messages: [
            {
              content: 'Gracias por la reunión de ayer, Manu, fue muy productiva!',
              received: false,
              date: '9:35 AM'
            },
            {
              content: 'Gracias a vos!',
              received: true,
              date: '9:37 AM'
            }
          ]
        }
      ])

而且我只想通過在每個對象的消息鍵中添加更多項目來修改它，而保持狀態的其余部分保持原樣。

例如，假設我向第一個對象添加了兩條新消息。 狀態應該是這樣的：

const [activeChats, setActiveChats] = useState([
    {
      id: 1,
      name: 'Luciana Gutierrez',
      role: 'HR Manager',
      avatar: avatar2,
      messages: [
        {
          content: 'Hola Luciana! Tuviste alguna novedad?',
          received: false,
          date: '9:45 AM'
        },
        {
          content: 'Hola John! Todavía no...',
          received: true,
          date: '10:19 AM'
        },
        {
          content: 'Si tengo alguna otra novedad te comento. Gracias!',
          received: true,
          date: '10:20 AM'
        },
        {
          content: 'Example1',
          received: true,
          date: '10:21 AM'
        },
        {
          content: 'Example2',
          received: true,
          date: '10:22 AM'
        }
      ]
    },
    {
      id: 2,
      name: 'Micaela Alvarez',
      role: 'Marketing Manager',
      avatar: avatar1,
      messages: [
        {
          content: 'Hola John! Entre qué horarios podrías hoy tener la meeting?',
          received: true,
          date: '9:45 AM'
        },
        {
          content: 'Hola Micaela! Muy bien. Yo puedo de 10 a 17 hs.',
          received: false,
          date: '10:05 AM'
        },
        {
          content: 'Dale, agendé la meeting para hoy a las 14hs.',
          received: true,
          date: '10:15 AM'
        }
      ]
    },
    {
      id: 3,
      name: 'Manuel Hoffman',
      role: 'Business Manager',
      avatar: avatar3,
      messages: [
        {
          content: 'Gracias por la reunión de ayer, Manu, fue muy productiva!',
          received: false,
          date: '9:35 AM'
        },
        {
          content: 'Gracias a vos!',
          received: true,
          date: '9:37 AM'
        }
      ]
    }
  ])

我怎樣才能做到這一點？ 我正在考慮擴展運算符，但我不確定如何將它與我擁有的嵌套一起使用。

Answer 1

您需要為setActiveStates返回一個新數組，特別注意不要改變您正在更新的嵌套對象。 一個長期的方法是findIndex()要更新的項目，然后使用此索引在相關項目之前和之后擴展數組的slice() s，並檢索和克隆項目本身和任何嵌套對象屬性返回副本。

const newMessages = [{ content: 'new1', received: true, date: '10:21 AM' }, { content: 'new2', received: true, date: '10:22 AM' }];
const itemId = 1;

setActiveChats(prevState => {
  const index = prevState.findIndex(({ id }) => id = itemId);
  const item = prevState[index];
  return [
    ...prevState.slice(0, index),
    { ...item, messages: [...item.messages, ...newMessages] },
    ...prevState.slice(index + 1)
  ];
});

Answer 2

使用嵌套結構執行此操作有點乏味，但應該可以：

    setActiveChats(
      activeChats.map((activeChat, idx) => {
        // Add to the first entry
        if (idx === 0) {
          return {
            ...activeChat,
            // assumes `newMessages` is an array of new messages
            messages: [...activeChat.messages, ...newMessages]
          };
        }
        return activeChat;
      })
    );

在此處查看完整的工作示例。