Redux Form：如何在触发功能之前提交？

Question

我在 React/Redux 中用 Redux Form 做的测验有问题。测验有条件逻辑（即如果你回答 "yes" 到问题 1，你转到问题 2；如果 "no"，你转到问题 6，等等），为了让条件逻辑在回答每个问题后正确重定向用户，答案需要在重定向发生之前记录。

这似乎并没有像我预期的那样发生...这似乎是 Redux Form 记录答案 的方式在之后函数被调用。

我如何设置它以便字段的值被记录在商店中（在 form.quiz.values 中）在我重定向用户之前？

这里是相关组件的代码：

class Quiz extends Component {
  constructor(props) {
    super(props);
    this.state = {
      screen: 1
    }
  }

  nextScreen = () => {
    if (this.state.screen === 12) {
      this.setState({screen: 13});
      this.props.sendAnswers(this.props.form.quiz.values);
    } else if (this.state.screen === 1 && this.props.result["own-property"] === "No") {
      this.setState({screen: 7});
    } else if (this.state.screen === 2 && this.props.result["property-type"] === "Owner-occupied") {
      this.setState({screen: 7});
    } else if (this.state.screen === 6) {
      this.setState({screen: 10});
    } else {
      this.setState({screen: this.state.screen + 1});
    }
  }

  lastScreen = () => {
    if (this.state.screen === 1) {
      this.props.history.push('/');
    } else if (this.state.screen === 7 && this.props.result["property-type"] === "Owner-occupied") {
      this.setState({screen: 2});
    } else if (this.state.screen === 7 && (this.props.result["property-type"] === undefined || this.props.result["property-type"] === null)) {
      this.setState({screen: 1});
    } else if (this.state.screen === 10 && (this.props.result["financial-goals"] === undefined || this.props.result["financial-goals"] === null)) {
      this.setState({screen: 6});
    } else {
      this.setState({screen: this.state.screen - 1});
    }
  }

  render() {
    const currentQuestion = Object.assign({}, data.questions[this.state.screen -1]);

    return (
      <div className="quiz">
        <ArrowButton src='/images/arrow-button.png' route="back" handleClick={this.lastScreen} />
        <QuestionContainer
          question={currentQuestion}
          handleClick={this.nextScreen} />
        <ArrowButton src='/images/arrow-button.png' route="forward" handleClick={this.nextScreen} />
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    form: state.form,
    result: state.result,
  }
};

const mapDispatchToProps = dispatch => {
  return {
    sendAnswers: (answers, result) => dispatch(sendAnswers(answers, result)),
  }
};

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

提前致谢！

Answer 1

我猜你是通过改变你所在州的屏幕值来重定向的？

如果是这样，这将独立于负责发送您的答案的 redux 操作进行更新。我的建议是通过您的 redux 操作更新 screen 的值。

Redux Form：如何在触发功能之前提交？

Redux Form: How to submit before function is triggered?

javascript

reactjs

redux

redux-form