时间戳

首页 > 解决方案 > 我是 redux 的新手并做出反应我正在尝试更新 REDUX 存储中的嵌套状态，但无法对其进行排序

javascript - 我是 redux 的新手并做出反应我正在尝试更新 REDUX 存储中的嵌套状态，但无法对其进行排序

问题描述

我在哪里失踪？请帮助解决这个问题_/_我无法正确更新redux存储状态而不会破坏

这是我在发布数据之前处于 redux 存储状态的当前状态

next state Object {
  "highlights": Object {
    "errMess": null,
    "highlights": Array [],
    "isLoading": true,
  },
  "posts": Object {
    "errMess": null,
    "isLoading": false,
    "posts": Array [
      Object {
        "__v": 0,
        "_id": "5f37c3ebc8cb6a46c89bc33c",
        "by": Object {
          "_id": "5ed8d7fcfd3da42bc426992a",
          "name": "mad",
          "username": "mad",
        },
        "content": "this is first post",
        "contentWarn": false,
        "createdAt": "2020-08-15T11:15:55.986Z",
        "flaged": false,
        "heading": "first pot",
        "report": 0,
        "updatedAt": "2020-08-15T11:15:55.986Z",
      },
    ],
  },
}

然后使用reducer执行添加新的post操作====>

export const posts = (
  state = { isLoading: true, errMess: null, posts: [] },
  action
) => {
  switch (action.type) {
 
   case ActionTypes.UPDATE_POSTS:
      return {
        posts: state.posts.posts.concat(action.payload),
      };
    default:
      return state;
  }
};

这是返回的错误

 action     Object {
  "payload": [TypeError: undefined is not an object (evaluating 'state.posts.posts.concat')],
  "type": "UPDATE_POSTS_FAILED",
}

undefined is not an object (evaluating 'state.posts.posts.concat')
* Redux\posts.js:24:13 in posts

这是我想要发生的结果

next state Object {
  "highlights": Object {
    "errMess": null,
    "highlights": Array [],
    "isLoading": true,
  },
  "posts": Object {
    "errMess": null,
    "isLoading": false,
    "posts": Array [
      Object {
        "__v": 0,
        "_id": "5f37c3ebc8cb6a46c89bc33c",
        "by": Object {
          "_id": "5ed8d7fcfd3da42bc426992a",
          "name": "mad",
          "username": "mad",
        },
        "content": "this is first post",
        "contentWarn": false,
        "createdAt": "2020-08-15T11:15:55.986Z",
        "flaged": false,
        "heading": "first pot",
        "report": 0,
        "updatedAt": "2020-08-15T11:15:55.986Z",
      },
     Object {
        "__v": 0,
        "_id": "5f37c3ebc8cb6a46c89bc33c",
        "by": Object {
          "_id": "5ed8d7fcfd3da42bc426992a",
          "name": "mad",
          "username": "mad",
        },
        "content": "this is second post",
        "contentWarn": false,
        "createdAt": "2020-08-15T11:15:55.986Z",
        "flaged": false,
        "heading": "second post",
        "report": 0,
        "updatedAt": "2020-08-15T11:15:55.986Z",
      }
    ],
  },
}

标签： javascriptreactjsreduxstate

解决方案

你的 reducer 应该有这样的结构，有两个级别的帖子：

export const posts = (
  state = {
    highlights: {
      errMess: null,
      highlights: [],
      isLoading: true,
    },
    posts: { isLoading: true, errMess: null, posts: [] },
  },
  action
) => {
  switch (action.type) {
    case ActionTypes.UPDATE_POSTS:
      return {
        ...state,
        posts: state.posts.posts.concat(action.payload),
      };
    default:
      return state;
  }
};

并尝试在状态中保持相同的数据结构，例如亮点！

推荐阅读