Reactjs React Redux操作有效负载不在componentDidMount中

我在componentWillMount中调用了一个action creator，该action负载的返回使用setState分配给state。但是，在componentDidMount中，我无法访问该属性，因为异步调用尚未完成。在ComponentDidMount中访问此数据的正确方法是什么

//component
class Dashboard extends Component {

componentWillMount() {
    this.setState(this.props.getUser());
  }

componentDidMount() {
    // this.state.user isn't available yet
}

render(){
  return(...);
}
}

//action
export function getUser() {
  return async function (dispatch) {
     const user = await axios.get(`${API_URL}user?token=${token}`);
     return dispatch({
      type: USER,
      payload: user,
     });
    } 
  };
}

---

Axios返回一个承诺，您必须等待它解决。然后像这样发布成功行动

export function getUser() {
  return function (dispatch) {
     axios.get(`${API_URL}user?token=${token}`)
        .then(user => {
             return dispatch(getUserSuccess(user));
        }).catch(error => {
            throw error;
        });
    } 
  };

  export function getUserSuccess(user) {
    return {type: USER, payload: user};
  }

还请注意，您需要使用

MapStateTops

，以便它将

用户

带到您的组件中。然后您可以使用组件中的

this.props.user

访问它。应该是这样的

UserPage.propTypes = {
  user: PropTypes.object.isRequired
};

function mapStateToProps(state, ownProps) {
  return {
    user: state.user
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({getUser}, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(UserPage);

  render() {
    const {user} = this.props;
    return(
      <div>
        <div>user.name</div>
      </div>
    );
  }

最后，您可以这样访问用户

UserPage.propTypes = {
  user: PropTypes.object.isRequired
};

function mapStateToProps(state, ownProps) {
  return {
    user: state.user
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({getUser}, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(UserPage);

  render() {
    const {user} = this.props;
    return(
      <div>
        <div>user.name</div>
      </div>
    );
  }

render（）{
const{user}=this.props；
返回(
用户名
);
}

Axios返回一个承诺，您必须等待它解决。然后像这样发布成功行动

export function getUser() {
  return function (dispatch) {
     axios.get(`${API_URL}user?token=${token}`)
        .then(user => {
             return dispatch(getUserSuccess(user));
        }).catch(error => {
            throw error;
        });
    } 
  };

  export function getUserSuccess(user) {
    return {type: USER, payload: user};
  }

还请注意，您需要使用

MapStateTops

，以便它将

用户

带到您的组件中。然后您可以使用组件中的

this.props.user

访问它。应该是这样的

UserPage.propTypes = {
  user: PropTypes.object.isRequired
};

function mapStateToProps(state, ownProps) {
  return {
    user: state.user
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({getUser}, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(UserPage);

  render() {
    const {user} = this.props;
    return(
      <div>
        <div>user.name</div>
      </div>
    );
  }

最后，您可以这样访问用户

UserPage.propTypes = {
  user: PropTypes.object.isRequired
};

function mapStateToProps(state, ownProps) {
  return {
    user: state.user
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({getUser}, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(UserPage);

  render() {
    const {user} = this.props;
    return(
      <div>
        <div>user.name</div>
      </div>
    );
  }

render（）{
const{user}=this.props；
返回(
用户名
);
}

您需要使用

组件WillReceiveProps

来执行此操作，例如：

componentWillReceiveProps(nextProps) {
   if (nextProps.user !== this.state.user) {
       this.setState({
           user: nextProps.user
       });
   }
}

现在，您可以在组件中使用

user

---

您可以找到更多信息。

您需要使用组件WillReceiveProps来执行此操作，例如：

componentWillReceiveProps(nextProps) {
   if (nextProps.user !== this.state.user) {
       this.setState({
           user: nextProps.user
       });
   }
}

现在，您可以在组件中使用

user

你可以找到更多的信息