Как я могу корректно обновить состояние при изменении события для типа type = range, оно дает предыдущее состояние

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;