Как обновить состояние с помощью setState на основе другого состояния после рендеринга?

Question

Я пытаюсь обновить состояния на основе других состояний после рендеринга jsx.

Некоторые состояния обновлены, но некоторые не обновляются.
Пожалуйста, рассмотрите возможность проверки 'ComponentDidMount ()». Я не уверен, что происходит!
Почему они не обновляются соответствующим образом?
Я в замешательстве!

import React, { Component } from "react";

export class MathQuiz extends Component {
  constructor(props) {
    super(props);
    this.state = {
      num1: 0,
      num2: 0,
      op_type: "",
      op: "",
      result: 0,
      no_right: 0,
      no_wrong: 0,
      options: <li />,
      ans_pos: 0,
      options_and_pos: [[], 0]
    };
  }

  componentDidMount() {
    this.genNums();
    this.initQuiz(this.props.location.state.op_type);
  }

  initQuiz(op_type) {
    this.setState({ op_type: op_type });
    if (op_type === "Addition") {
      this.setState({ op: "+" });
      this.setState(prevState => ({ result: prevState.num1 + prevState.num2 }));
    } /* Code */
    } else if (op_type === "Multiplication") {
      this.setState({ op: "x" });
      this.setState(prevState => ({ result: prevState.num1 * prevState.num2 }));
    console.log(this.state.result);
    this.setState({ options_and_pos: this.getOptions(this.state.result) });
    this.setState({
      options: this.state.options_and_pos[0].map((ele, i) => (
        <li key={i}>{ele}</li>
      ))
    });
    this.setState({ ans_pos: this.state.options_and_pos[1] });
  }
  genNums() {
    this.setState({
      num1: this.genRandRange(1, 100),
      num2: this.genRandRange(1, 100)
    });
  }
  getOptions(ans) {
    /* Code */
    return [ans_options, rand_pos];
  }
  render() {
    return (
      <div className="math_quiz_box">
        /* JSX Code */
      </div>
    );
  }
}

Answer 1

Хуже того, что состояние изменилось другим состоянием. Это лучшее состояние, измененное реквизитом или обработчиком события.

Например, this.genNums() не обязательно выполнять в componentDidMount()

this.setState(prevState => ({ result: prevState.num1 + prevState.num2 }));

код выше может быть изменен как:

this.setState({result: 2*this.genRandRange(1, 100)}) //assume this.genRandRange() return Number not String

И весь абзац может быть изменены:

import React, { Component } from "react";

export class MathQuiz extends Component {
  constructor(props) {
    super(props);
    this.state = {
      //num1: 0,    if only used by other state
      //num2: 0,
      //op_type: "", if only used by other state
      op: "",
      result: 0,
      no_right: 0,
      no_wrong: 0,
      options: <li />,
      ans_pos: 0,
      //options_and_pos: [[], 0]  if only used by other state
    };
  }

  componentDidMount() {
    this.initQuiz(this.props.location.state.op_type);
  }

  initQuiz(op_type) {
    if (op_type === "Addition") {
      this.setState({ 
         op:"+",
         result: 2*this.genRandRange(1, 100) 
      });
     /* Code */
    } 
    else if (op_type === "Multiplication") {
       this.setState({
          op:"x", 
          result: Math.pow(this.genRandRange(1, 100),2),
          options: this.getOptions(Math.pow(this.genRandRange(1, 100),2))[0].map((ele, 
                   i) => (<li key={i}>{ele}</li>)),
          ans_pos:this.getOptions(Math.pow(this.genRandRange(1, 100),2))[1]
        });
     }
  }
  genNums() {
    this.setState({
      num1: this.genRandRange(1, 100),
      num2: this.genRandRange(1, 100)
    });
  }
  getOptions(ans) {
     /* Code */
    return [ans_options, rand_pos];
  }
  render() {
    return (
      <div className="math_quiz_box">
        /* JSX Code */
      </div>
    );
  }
}

Приведенный выше код, просто сделайте setState один раз, может предотвратить проблему, такую ​​как infinte l oop или цепочка обновления состояния.

Если вам нужно сделать цепочку setState, используйте

this.setState({
    example:"example value"
},()=>{
    // when example value has been set, then execute follow statement.
    this.setState({
       example2:this.state.example+"2"  //example2:"example value2"
    })
})

Answer 2

React docs помогает вам:

setState () не всегда сразу обновляет компонент. Это может пакетировать или отложить обновление до позже. Это делает чтение this.state сразу после вызова setState () потенциальной ловушкой.

, а также дает вам решение:

Вместо этого используйте обратный вызов componentDidUpdate или setState callback ( setState (updater, callback)), любой из которых гарантированно сработает после применения обновления.

Итак, убедитесь, что вы не используете состояние, сразу после обновления состояния.