Почему я не могу использовать карту на избыточном useSelector? - PullRequest
Новая
       7

Почему я не могу использовать карту на избыточном useSelector?

0 голосов
/ 16 апреля 2020

У меня есть этот фрагмент кода, и я пытаюсь извлечь данные из конечной точки API и просмотреть все данные в компоненте React. Я использую useSelector для чтения состояния и setState для определения состояния в указанном c компоненте. Когда я пытаюсь отобразить массив, он говорит, что карта не определена. В чем проблема с этим? 

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

1 Ответ

0 голосов
/ 17 апреля 2020

Я решил эту проблему с помощью 'redux-thunk', поместив вызов asyn c с сервера в промежуточное ПО. Документация по response-redux довольно ясна и помогает понять, как использовать избыточный thunk для этого типа асинхронных вызовов c.

Я использовал 

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

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

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

return store;
...