我将Home组件道具与动作方法连接起来，并成功分发了reducer。一切似乎都正常，我可以在控制台中看到Api数据进入reducer。
问题是，react不会重新呈现ProfileGroupsWidget。this.props.user始终是{}在此子组件中，我期望它是{name：“ John Doe”}
这是userReducer，“ GET_AUTH_USER_SUCCESS”来自getAuthenticatedUser：
const initialState = {};
const userReducer = (state = initialState, action) => {
switch (action.type) {
case 'GET_AUTH_USER_SUCCESS':
console.log('Output:', action.user); // {name: "John Doe"}
state = action.user
return state;
default:
return state
}
}
export {userReducer}
家庭是我的家庭组成部分：
import React, { Component } from 'react';
import ProfileGroupsWidget from './Widgets/ProfileGroupsWidget.js'
import {connect} from 'react-redux'
import {userActions} from "../_actions/userActions";
class Home extends Component{
constructor(props) {
super(props);
this.state = {
user: this.props.user
}
this.props.getAuthenticatedUser();
}
render() {
return (
<ProfileGroupsWidget user={this.state.user}></ProfileGroupsWidget>
)
}
}
const mapStateToProps = state => {
return state
}
function mapDispatchToProps(dispatch){
return {
getAuthenticatedUser : () => {dispatch(userActions.getAuthenticatedUser())}
}
}
// Connect Home component props with store data:
export default connect(mapStateToProps, mapDispatchToProps)(Home);
在您的代码中，this.props.user将始终是未定义的，因为您没有在化简器中为其设置值。我们必须通过以下方式设置值：
编辑代码：
const initialState = {
user: {}
};
const userReducer = (state = initialState, action) => {
switch (action.type) {
case 'GET_AUTH_USER_SUCCESS':
return { ...state, user: action.user };
default:
return state;
}
}
export { userReducer }
编辑后的代码：在home组件中：（在mapStateToProps中，我保留userReducer为标识符，请将其更改为您在rootReducer中使用的任何减速器名称）。
如果您愿意，我们也可以完全删除构造函数代码，然后将动作分派移至componentWillMount()。
import React, { Component } from 'react';
import ProfileGroupsWidget from './Widgets/ProfileGroupsWidget.js'
import { connect } from 'react-redux'
import { userActions } from "../_actions/userActions";
class Home extends Component{
constructor(props) {
super(props);
this.state = {
user: props.user
}
props.getAuthenticatedUser();
}
render() {
return (
<ProfileGroupsWidget user={this.props.user}></ProfileGroupsWidget>
)
}
}
const mapStateToProps = state => ({
user: state.userReducer.user
});
const mapDispatchToProps = (dispatch) => ({
getAuthenticatedUser: () => dispatch(userActions.getAuthenticatedUser())
});
// Connect Home component props with store data:
export default connect(mapStateToProps, mapDispatchToProps)(Home);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句