React Redux 无法将对象插入嵌套数组答案

【问题标题】：React Redux not able to insert an object into nested arrayReact Redux 无法将对象插入嵌套数组
【发布时间】：2022-01-04 04:19:22
【问题描述】：

我试图将对象插入特定对象（即对象列表）。下面是代码。

import MESSAGES from '../actions/Messages';
import update from 'immutability-helper';

const chatReducer = (state = [], { type, payload }) => {
    switch (type) {
        case CHATS:
            // state = [...state, payload];
            // return state;
            return state, payload;
        case MESSAGES:
            let index = state.findIndex(
                chat =>  chat.chatId === payload.chatId);
            const conn = state[index];
            const messages = [...conn.messages, payload];
            const newState = state.slice();
            newState[index] = { ...conn, messages };
            //console.log("ne ", newState)
            return newState;
        default:
            return state
    };
};

export default chatReducer;

这里只是根据 id 找到对象并将有效负载插入到无法正常工作的消息数组中。

【问题讨论】：

当状态为空数组时，您的index 将是未定义的
也 return state, payload; 似乎不正确。
@SaeedShamloo 是的，状态是一个对象值数组。我刚刚做了一个调试。
console.log("ne ", newState) 的输出是什么？这是你预期的结果吗？
不，它没有打印出来。

标签： reactjs redux react-redux

【解决方案1】：

您必须处理 2 次检查

如果索引为 -1（未找到聊天 ID）：添加新的聊天对象
不要切片，它只会返回其余的项目，并且索引会不匹配

    const chatReducer = (state = [], { type, payload }) => {
      switch (type) {
        case CHATS:
          // state = [...state, payload];
          // return state;
          return [...state, ...payload];
        case MESSAGES:
          let index = state.findIndex((chat) => chat.chatId === payload.chatId);
    
          if (index !== -1) {
            const conn = state[index];
            const messages = [...conn.messages, payload];
            const newState = [...state]; // use destructuring instead of slice
            newState[index] = { ...conn, messages };
            return newState;
          }
          return [
            ...state,
            /* <add new chat object> */
          ]; // Do something if the chat doesn't exist
        default:
          return state;
      }
    };

【讨论】：

它不工作。
@RED 你有什么错误吗
调试时显示未定义。但我有状态数组和有效载荷。由于控制台中没有打印任何内容。
@RED 是这个错字return state, payload;
我只是返回状态数组并将有效负载添加到其中。 return state, payload; 有错吗？

【解决方案2】：

我会回答我自己的问题，谢谢@Rahul Sharma 你刚刚重定向了我。由于我的应用要求，我更改了对象。

import CHATS from '../actions/ChatMessages';
import MESSAGES from '../actions/Messages';
import SEARCH from '../actions/SearchUser';

const chatReducer = (state = {}, { type, payload }) => {
    switch (type) {
        case CHATS:
            return { ...state, payload };
        case MESSAGES:
            let index = state.payload.chats.findIndex(
                chat => chat.chatId === payload.chatId
            );
            let conn = state.payload.chats[index];
            const msg = payload.msg;
            conn.lastMsg = msg;
            const messages = [...conn.messages, payload];
            const newState = { ...state };
            newState.payload.chats[index] = { ...conn, messages };
            console.log("state ", newState);
            return newState;
        default:
            return state
    };
};

export default chatReducer;

【讨论】：