【问题标题】:Data fetched from axios is storing inside an additional Array without a reason从 axios 获取的数据无缘无故地存储在一个额外的数组中
【发布时间】:2020-10-05 00:16:33
【问题描述】:

我正在从 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}
  ]
]

这是我的初始状态和减速器,两者都在单独的文件中:

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

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

这对我来说似乎很奇怪,我不确定是什么导致它将数据放入另一个数组中。有人可以看看吗。

【问题讨论】:

    标签: reactjs mongodb axios


    【解决方案1】:

    action.payload 是一个数组。 状态合并错误 in

    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  
    

    【讨论】:

    • 天哪!!!这就是为什么人们有时会要求多一双眼睛……非常感谢,这显然解决了问题。
    猜你喜欢
    • 2012-05-12
    • 2015-02-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-12-24
    • 1970-01-01
    • 2020-03-06
    • 2021-11-20
    相关资源
    最近更新 更多