问题

I'm new to react and I'm trying to understand on to make async ajax request. I was able to get the request completed and the data returned added to my state, but I can't render the data to my component. Here's my setup.

UserPage component

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);

Action

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

export function getUsers() {

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

With the get function from request.js module

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

When I load the UserPage component, I can see the request being done and the state being updated in the redux dev tool, but I can't display this.props.users.

If I take out the if(this.props.users) in the render() method of the User component, I get an undefined on this.props.users.

What am I doing wrong?

Any help greatly appreciated! Thank you

SOLVED

The solution was to set the users property to state.users.all in the mapStateToProps function.

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

Thank you

回答1:

Could you check, do you have this.renderUsers() defined in that render function? It might be you forgot to bind it, and that function is undefined?

Try to add this.renderUsers = this.renderUsers.bind(this); in your constructor and see, if it helps.

来源：https://stackoverflow.com/questions/43126987/react-redux-thunk-component-doesnt-render-this-props

标签

javascript