渲染后如何根据另一个状态使用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

React 文档可以帮助您：

setState() 并不总是立即更新组件。 它可能会批量更新或推迟更新。 这使得在调用 setState() 之后立即读取 this.state 成为一个潜在的陷阱。

并为您提供解决方案：

相反，请使用 componentDidUpdate 或 setState 回调 (setState(updater, callback))，这两者都保证在应用更新后触发。

因此，请确保在更新状态后不使用该状态。

Answer 2

更糟糕的是，状态被其他状态改变了。 最好通过道具或事件处理程序更改状态。

例如， 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，就可以防止无限循环或状态更新链等问题。

如果您必须执行 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"
    })
})