從 axios 獲取的數據無緣無故地存儲在一個附加數組中

Question

我正在從 mongo 獲取以下數據：

"data": [
        {
            "_id": "5ee3f064344d21fb2645f5c0",
            "name": "John",
            "surname": "Doe",
            "email": "john@gmail.com",
            "createdAt": "2020-06-12T21:15:16.624Z",
            "__v": 0
        },
        {
            "_id": "5ee5e27f1ecd8f05ad764057",
            "name": "Jane",
            "surname": "Doe",
            "email": "jane@gmail.com",
            "createdAt": "2020-06-14T08:40:31.701Z",
            "__v": 0
        }

我正在使用 axios 來獲取數據。 下面是我獲取數據的代碼：

async function getUser() {
    const user = await axios.get('/api/plugins/users');

    dispatch({
      type: 'GET_USER',
      payload: user.data.data,
    });
  }

數據都很好，但問題是我在另一個數組中獲取數據數組，我不知道如何。

這是我得到的：

[
  [
    {"_id":"5ee3f064344d21fb2645f5c0","name":"John","surname":"Doe","email":"john@gmail.com","createdAt":"2020-06-12T21:15:16.624Z","__v":0},
{"_id":"5ee5e27f1ecd8f05ad764057","name":"Jane","surname":"Doe","email":"jane@gmail.com","createdAt":"2020-06-14T08:40:31.701Z","__v":0}
  ]
]

這是我的初始 State 和減速器，兩者都在單獨的文件中：

const initialState = {
  users: [],
  loading: true,
};

case 'GET_USER':
      return {
        ...state,
        users: [...state.users, action.payload],
        loading: false,
      };

這對我來說似乎很奇怪，我不確定是什么導致它將數據放入另一個數組中。 有人可以看看嗎。

Answer 1

action.payload是一個數組。 state 合並錯誤

case 'GET_USER':
      return {
        ...state,
        users: [...state.users, action.payload], //it's wrong.It will create nested array
        loading: false,
      };

它應該是

users: [...state.users, ...action.payload], // spread array element in users