反应 redux-thunk 组件不呈现 this.props

Question

我是新手，我正在尝试了解如何发出异步 ajax 请求。我能够完成请求并将返回的数据添加到我的状态，但我无法将数据呈现到我的组件。这是我的设置。

用户页面组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { getUsers } from '../../actions';

class User extends Component {
    displayName: 'User';

    componentWillMount() {
        this.props.getUsers();
    }

    renderUsers() {
        return this.props.users.map(user => {
            return (
                <h5>{user.Name}</h5>
            );
        });
    }

    render() {
        var component;
        if (this.props.users) {
            component = this.renderUsers()
        } else {
            component = <h3>asdf</h3>;
        }

        return (            
            <div>
                {component}
            </div>

        );
    };
};

function mapStateToProps(state) {
    return {
        users: state.all
    };
}

export default connect(mapStateToProps, { getUsers })(User);

动作

import request from '../helpers/request';
import { GET_USERS } from './types';

export function getUsers() {

    return request.get(GET_USERS, 'Person/GetPeople');
}

使用 request.js 模块的 get 函数

get: function (action, url) {
        return (dispatch) => {
            axios.get(`${ROOT_URL}${url}`)
                .then(({ data }) => {
                    dispatch({
                        type: action,
                        payload: data
                    });
                });
        };
    }

User_reducer

import { GET_USERS } from '../actions/types';

export default function (state = {}, action) {
    switch (action.type) {
        case GET_USERS:
            console.log(action);
            return { ...state, all: action.payload }
        default:
            return state;
    };
}

当我加载UserPage组件时，我可以在redux开发工具中看到请求完成和状态正在更新，但是我无法显示this.props.users。

如果我在 User 组件的 render() 方法中取出 if(this.props.users)，我会在 this.props.users.

上得到一个 undefined

我做错了什么？

非常感谢任何帮助！谢谢

已解决

解决方案是在 mapStateToProps 函数中将用户属性设置为 state.users.all。

function mapStateToProps(state) {
    return {
        users: state.users.all
    };
}

谢谢

Answer 1

你能检查一下，你在渲染函数中定义了 this.renderUsers() 吗？可能是你忘记绑定了，那个函数是undefined?

尝试在构造函数中添加 this.renderUsers = this.renderUsers.bind(this);，看看是否有帮助。

反应 redux-thunk 组件不呈现 this.props

react redux-thunk component doesn't render this.props

javascript

reactjs

redux

jsx

redux-thunk

用户页面组件

动作

User_reducer

已解决