javascript - 在react-redux中异步函数成功后如何调用组件的方法？

Question

主要成分:

class GettingStarted extends React.Component {

  state = {
    incompleteStage: ['a', 'b', 'c']
  };


  next = () => {
    const data = this.state.incompleteStage;
    // Everytime when next() gets called removes the first stage 
    // from incompleteStage.
    this.setState({
      incompleteStage: [...data.slice(1)]
    });
  }

  render() {
    const { incompleteStage } = this.state;
    const { isSmallDevice, me } = this.props;
    if (incompleteStage.length === 0) return null;

    return (
      <div>
       <Child {...props}/>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  postStageLoading: state.auth.postStageLoading,
  postStageError: state.auth.postStageError
});

const mapDispatchToProps = (dispatch) => bindActionCreators({}, dispatch);

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

子组件:

class Child extends React.Component {
  handleSubmit = event => {
    event && event.preventDefault();
    const { postStage } = this.props;
    const { next, name, nextStage } = this.props;
    postStage(name, nextStage);   // async call
    next();
  }

  render() {
    const { me } = this.props;

    return (
      <div >
        <Typography
          Welcome {me ? me.nameOrEmail : ''}!
        </Typography>
      </div> 
    );
  }
}

const mapStateToProps = (state) => ({

});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  postStage
}, dispatch);

export default withStyles(styles)(connect(
  mapStateToProps,
  mapDispatchToProps
)(Child));

modules/index.js(因为太长我只写了重要的)

export default (state = initialState, {type, payload}) => {
    case types.POST_STAGE_REQUEST:
      return Object.assign({}, state, {
        postStageLoading: true
      });
    case types.POST_STAGE_SUCCESS:
      return Object.assign({}, state, {
        postStageLoading: false,
      });
    case types.POST_STAGE_FAILURE:
      return Object.assign({}, state, {
        postStageLoading: false,
        postStageError: payload
      });
}
export const postStage = (currentStage) => {
  return dispatch => {
    request.post('/stage', {stage: currentStage}, dispatch)
    .then(({ data }) => {
      if (data.success) {
        dispatch({
          type: types.POST_STAGE_SUCCESS,
        });
        dispatch(push(nextStage));
    }
 }
};

因此，如果您可以在 Child 中看到 只有在成功调用 post 请求后，我才必须调用(主要组件的)next() 方法。 next() 。 (我跳过了一些代码，因为它太长了)。如果我在 postStage 之后调用(就像我在 Child 中所做的那样)，我无法保证 api 调用成功。我在哪里以及如何调用它？

我在 Child 中有一个按钮，其中有一个 eventHandler - handleSubmit

Answer 1

您应该将 incompleteStage 存储在您的商店中并让 reducer 更改它。当异步完成时分派(dispatch)一个操作，reducer 应该更改 incompleteStage 数组，这样你的组件就会更新它的 props。