时间戳

首页 > 解决方案 > 为什么我不能在 redux useSelector 上使用 map？

reactjs - 为什么我不能在 redux useSelector 上使用 map？

问题描述

我有这段代码，我想做的是从 api 端点获取数据并查看 React 组件中的所有数据。我正在使用 useSelector 读取状态并使用 setState 来设置该特定组件中的状态。当我尝试映射数组时，它说映射未定义。这有什么问题？

import React, {useState} from 'react';
import ContainerHeader from 'components/ContainerHeader/index';
import IntlMessages from "../../../util/IntlMessages";
import {useDispatch, useSelector} from "react-redux";
import TextField from "@material-ui/core/TextField";
import {getUsersFromBackEnd} from "../../../actions";

const UsersPage = ({match}) => {
const dispatch = useDispatch();
const allUsers = () => dispatch(getUsersFromBackEnd());

const [users, setUsers] = useState(allUsers);

const getUsers = useSelector(state => state.users);
console.log('users array: ', getUsers.users)

return (
    <div className="app-wrapper">
        <ContainerHeader match={match} title={<IntlMessages id="pages.users"/>}/>
        <div className="d-flex justify-content-center">
            <h1>Users Page</h1>
            <ul>
            </ul>
        </div>
    </div>
 )
}

export default UsersPage;

我的日志返回是这样的：

{users: Array(2)}
 users: Array(2)
  0: {id: 1, name: "Admin", email: "admin@admin.com", 
   email_verified_at: null, approved: 1, …}
  1: {id: 2, name: "User 2", email: "mail@mail.com", 
   email_verified_at: null, approved: 0, …}
      length: 2 
       ..........

我的端点返回这个：

{
"result": true,
"users": [
    {
        "id": 1,
        "name": "Admin",
        "email": "admin@admin.com",
        "email_verified_at": null,
        "approved": 1,
        "created_at": null,
        "updated_at": null,
        "deleted_at": null,
        "roles": [
            {
                "id": 1,
                "title": "Admin",
                "created_at": null,
                "updated_at": null,
                "deleted_at": null,
                "pivot": {
                    "user_id": 1,
                    "role_id": 1
                }
            }
        ]
    },
    {
        "id": 2,
        "name": "User 2",
        "email": "mail@mail.com",
        "email_verified_at": null,
        "approved": 0,
        "created_at": "2020-04-16 07:35:48",
        "updated_at": "2020-04-16 07:35:48",
        "deleted_at": null,
        "roles": [
            {
                "id": 2,
                "title": "User",
                "created_at": null,
                "updated_at": null,
                "deleted_at": null,
                "pivot": {
                    "user_id": 2,
                    "role_id": 2
                }
            }
        ]
    }
]
}

标签： reactjsreduxreact-reduxsetstate

解决方案

我已经使用“redux-thunk”将来自服务器的异步调用放在中间件中解决了这个问题。react-redux 的文档非常清晰，有助于理解如何使用 redux thunk 进行这种类型的异步调用。

我用过

import thunk from 'redux-thunk';
import {getUser, getUsersFromBackEnd} from "../actions";

.../* configureStore logic */...

    store.dispatch(getUser());
    store.dispatch(getUsersFromBackEnd());

return store;

推荐阅读