ฉันยังใหม่กับ 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",
      },
    ],
  },
}

จากนั้นเพิ่มการดำเนินการโพสต์ใหม่โดยใช้ตัวลด====›

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",
      }
    ],
  },
}

reactjs javascript redux state
person Madhav Gautam    schedule 15.08.2020    source แหล่งที่มา

คำตอบ (2)


arrow_upward
0
arrow_downward

ตัวลดของคุณควรมีโครงสร้างนี้พร้อมโพสต์สองระดับ:

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;
  }
};

และพยายามรักษาโครงสร้างข้อมูลเดียวกันในสถานะ เช่น ไฮไลท์ !

person Lafi    schedule 15.08.2020
comment
ขอบคุณสำหรับการตอบกลับ .. จริง ๆ แล้วฉันยังมีตัวลดอื่นสำหรับการเน้นในไฟล์อื่น .... ยังคงได้รับข้อผิดพลาดเดียวกันในการเปลี่ยน case ActionTypes.UPDATE_POSTS: return { ...state, posts: state.posts.posts.concat(action .น้ำหนักบรรทุก), }; - person Madhav Gautam; 15.08.2020
comment
``` case ActionTypes.UPDATE_POSTS: return { ...state, posts: state.posts.push(action.payload), } ``` ฉันทำการเปลี่ยนแปลงนี้.. อัปเดตสถานะอย่างถูกต้อง แต่... ส่งข้อผิดพลาด คำเตือน: สามารถ ไม่ทำการอัพเดตสถานะ React บนส่วนประกอบที่ไม่ได้ต่อเชื่อม นี่คือการไม่ทำ...... - person Madhav Gautam; 16.08.2020

arrow_upward
0
arrow_downward 

      return {
        ...state,
        posts: state.posts.concat(action.payload),
      }

ตัวลดนี้ใช้งานได้ หมายเหตุ: ฉันกำลังใช้ตัวลดไฮไลต์ในไฟล์แยกต่างหาก

person Madhav Gautam    schedule 16.08.2020