Question

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

Answer 1

在您的代码中，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);

Answer 2

您为什么将props.user传递到您的状态？根据您当前的代码，这应该是不必要的。这样，最好将this.props.user直接分配给ProfileGroupsWidget。也就是说，您的redux在正常工作并且已正确连接到组件。

这里的另一件事（Calling action from constructor vs a life cycle method）最好在componentDidMount内而不是在构造函数内调用网络请求或操作：

componentDidMount() {
  this.props.getAuthenticatedUser();
}

如果一切正确，那么将this.props.user记录在render（）中应该会看到多个console.logs：

render() {
  console.log(this.props.user);
  /*
    should be called at least twice,
    the last one containing the data {name: "John Doe"}
  */

  return (
    <ProfileGroupsWidget user={this.props.user}></ProfileGroupsWidget>
  )
  ...

在React中将新状态传递给子组件

2 个答案: