如何在表单类型 = 范围的更改事件上正确更新状态，它给出了以前的状态

Question

我想在句柄更改函数中发生更改事件后在 url 中传递更新的状态。

它传递了以前的状态，而不是给它当前更新的状态。

例如，状态值贷款期限为 13，但当我在控制台记录它时，它显示为 12。当我更改贷款金额时，它显示为 3058，但我记录了 3016，这是之前的状态。

请帮忙

import React, { Component } from "react";
import axios from "axios";

class Form extends Component {
  state = {
    loanAmount: "500",
    loanDuration: "6"

  };

  handleChange = event => {
    event.preventDefault();
    console.log(this.state.loanAmount, this.state.loanDuration);

    axios
      .get(
        `https://ftl-frontend-test.herokuapp.com/interest?
        amount=${this.state.loanAmount}&numMonths=${this.state.loanDuration}`
      )
      .then(resp => {
        this.props.onChange(resp.data);
        this.setState({ loanAmount: this.state.loanAmount, loanDuration: this.state.loanDuration });
      });
  };

  render() {

    return (
      <>
        <form onChange={this.handleChange}>
          <div className="amount form-control">
            <label htmlFor="formControlRange">Loan Amount  </label>

            <span className="rangeAmount">{this.state.loanAmount}</span>
            <input
              type="range"
              className="amountInput form-control-range"
              onChange={event =>
                this.setState({
                  loanAmount: event.target.value
                })}

              value={this.state.loanAmount}

              min="500"
              max="5000"
            />
          </div>
        </form>
        <form onChange={this.handleChange}>
          <div className="duration form-control">
            <label htmlFor="formControlRange">Loan Duration  </label>

            <span className="rangeDuration">{this.state.loanDuration}</span>
            <input
              type="range"
              className="amountInput form-control-range"
              onChange={event =>
                this.setState({
                  loanDuration: event.target.value,
                })}
              value={this.state.loanDuration}


              min="6"
              max="24"
            />
          </div>

        </form >
      </>
    );
  }
}

export default Form;

Answer 1

这是因为我们在执行 setState 后无法立即获取状态。这是 React 的功能。你最好使用 componentDidUpdate，它是 React 生命周期的一部分，当组件中有更新时调用。

您可以像这样更改代码。

import React, { Component } from "react";
  import axios from "axios";

class Form extends Component {
  state = {
    loanAmount: "500",
    loanDuration: "6"
  };

  componentDidUpdate = (prevProps, prevState) => {
    if(prevState.loanAmount !== this.state.loanAmount || prevState.loanDuration !== this.state.loanDuration) {
      console.log(this.state.loanAmount);
      console.log(this.state.loanDuration);

    axios
       .get(
         `https://ftl-frontend-test.herokuapp.com/interest?
         amount=${this.state.loanAmount}&numMonths=${this.state.loanDuration}`
       )
       .then(resp => {
         this.props.onChange(resp.data);
         this.setState({ loanAmount: this.state.loanAmount, loanDuration: this.state.loanDuration });
       });


  };

  render() {

    return (
      <>
        <form>
          <div className="amount form-control">
            <label htmlFor="formControlRange">Loan Amount  </label>

            <span className="rangeAmount">{this.state.loanAmount}</span>
            <input
              type="range"
              className="amountInput form-control-range"
              onChange={event =>
                this.setState({
                  loanAmount: event.target.value
                })}

              value={this.state.loanAmount}

              min="500"
              max="5000"
            />
          </div>
        </form>
        <form>
          <div className="duration form-control">
            <label htmlFor="formControlRange">Loan Duration  </label>

            <span className="rangeDuration">{this.state.loanDuration}</span>
            <input
              type="range"
              className="amountInput form-control-range"
              onChange={event =>
                this.setState({
                  loanDuration: event.target.value,
                })}
              value={this.state.loanDuration}


              min="6"
              max="24"
            />
          </div>

        </form >
      </>
    );
  }
}

export default Form;