如何使用 REST 显示数据？答案

【问题标题】：how to display data with REST?如何使用 REST 显示数据？
【发布时间】：2020-11-20 10:08:14
【问题描述】：

求助，我无法显示来自服务器的数据。在控制台中，我看到它们来了，但是当我尝试访问数组或通过 map 调用它时，结果是未定义的。也许实施的问题在哪里？ redux的新手，如果可以的话请你详细回答一下。

App.js

import React from 'react';
import {Component} from "react";
import './App.css';
import {connect} from 'react-redux';
import {fetchUsersListRequest} from "./action/users";

class App extends Component {

    componentDidMount() {
        const {usersData} = this.props;

        usersData("https://reqres.in/api/users?page=2");
    }

    render() {
        const {users} = this.props;
        return (
     

                <div className="apiList">
                    <ul>
                        {users.map(userItem =>
                        <li>{userItem}</li>
                        )}
                    </ul>
                </div>
        
        );
    }
}

function mapStateToProps(state) {
    return {
        states: state.cars,
        users: state.users
    }
}

function mapDispatchToProps(dispatch) {
    return {
        addCar: (newCar) => {
            dispatch({type: 'NEW_CAR', payload: newCar})
        },
        usersData: (url) => {
            dispatch(fetchUsersListRequest(url))
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

store.js

import {combineReducers, createStore, applyMiddleware} from 'redux';
import thunk from "redux-thunk";
import reducers from './reducers/reducers';
import usersList from './reducers/usersList';



 const allReducers = combineReducers({
     cars : reducers,
     users: usersList
})

let store = createStore(allReducers,
    applyMiddleware(thunk));

export default store;

reducer.js

const initialState = [];

 export default function usersList(state = initialState, action) {
     switch(action.type) {
         case "USERS_LIST_DATA":
             return action.users

         default:
             return state;

     }

action.js

export function fetchUsersList(users) {
    return {
        type: "USERS_LIST_DATA",
        users
    }
}


export function fetchUsersListRequest(url) {
    return(dispatch)=> {
        fetch(url)
            .then(response => {
                    if (!response.ok) {
                        throw new Error(response.statusText);
                    }
                    return response;
                }
            )
            .then(response => response.json())
            .then(response => dispatch(fetchUsersList(response)))
    }
}

【问题讨论】：

console.log(this.props.users) 并告诉我们你得到了什么，尽管它显示了 undefined 等错误。

标签： reactjs api rest redux

【解决方案1】：

这是因为您的用户并未直接包含在响应中。因此，您需要像这样调度您的用户：

export function fetchUsersListRequest(url) {
return(dispatch)=> {
    fetch(url)
        .then(response => {
                if (!response.ok) {
                    throw new Error(response.statusText);
                }
                return response;
            }
        )
        .then(response => response.json())
        .then(response => dispatch(fetchUsersList(response.data)))
}

}

【讨论】：