[英]react redux-thunk component doesn't render this.props
我是新来的反应者,我想了解如何提出异步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
});
});
};
}
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上得到未定义的信息。
我究竟做错了什么?
任何帮助,不胜感激! 谢谢
解决方案是在mapStateToProps函数中将users属性设置为state.users.all。
function mapStateToProps(state) {
return {
users: state.users.all
};
}
谢谢
您可以检查一下,是否在该渲染函数中定义了this.renderUsers()
? 可能是您忘记了绑定它,而该函数undefined
?
尝试添加this.renderUsers = this.renderUsers.bind(this);
在构造函数中查看是否有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.