Question

我有一个我在componentWillMount中调用的动作创建者，使用setState将该动作有效负载的返回分配给状态。但是，在componentDidMount中，我无法访问该属性，因为异步调用尚未完成。在compoentDidMount中访问此数据的正确方法是什么？

//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,
     });
    } 
  };
}

Answer 1

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

另请注意，您需要mapStateToProps才能将user带到您的组件。然后，您可以使用组件中的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>
    );
  }

Answer 2

您需要使用componentWillReceiveProps来执行此操作，例如：

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

现在您可以在组件中使用user。

Here您可以找到更多信息。

React Redux动作有效负载不在componentDidMount中

2 个答案: