saya baru mengenal Redux dan bereaksi. Saya mencoba memperbarui status bersarang di toko REDUX, tetapi tidak dapat menyelesaikannya

dimana aku hilang? tolong bantu menyelesaikan masalah ini ___ saya mengalami masalah dalam memperbarui status penyimpanan redux dengan benar tanpa kerusakan

Ini adalah status saya saat ini dalam status penyimpanan redux sebelum memposting data

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

lalu tambahkan postingan baru, tindakan dilakukan menggunakan peredam====›

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

ini adalah kesalahan yang dikembalikan

 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

inilah hasil yang saya inginkan terjadi

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

person Madhav Gautam    schedule 15.08.2020    source sumber


Jawaban (2)


Peredam Anda harus memiliki struktur ini dengan dua tiang tingkat:

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

dan coba pertahankan struktur data yang sama, seperti highlight!

person Lafi    schedule 15.08.2020
comment
Terima kasih atas tanggapannya.. sebenarnya saya memiliki peredam lain untuk sorotan di file yang berbeda.... masih mendapat kesalahan yang sama saat mengubah huruf ActionTypes.UPDATE_POSTS: return { ...state, posts: state.posts.posts.concat(action .muatan), }; - person Madhav Gautam; 15.08.2020
comment
``` case ActionTypes.UPDATE_POSTS: return { ...state, posts: state.posts.push(action.payload), } ``` Saya membuat perubahan ini.. status diperbarui dengan benar tetapi... menimbulkan kesalahan Peringatan: Bisa tidak melakukan pembaruan status React pada komponen yang tidak dipasang. Ini adalah larangan...... - person Madhav Gautam; 16.08.2020

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

peredam ini berfungsi Catatan: Saya menggunakan peredam sorotan dalam file terpisah

person Madhav Gautam    schedule 16.08.2020