javascript - How to update state using setState based on another state after rendering? - Stack Overflow

admin管理员组

文章数量:1349729

I'm trying to update states based on other states after rendering the jsx.

Some of the states are updated but some of them are not updated.
Please consider checking 'ComponentDidMount()'. I'm not sure what is going on!
Why are they not getting updated accordingly?
I'm confused!

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]
    };
  }

  ponentDidMount() {
    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>
    );
  }
}

I'm trying to update states based on other states after rendering the jsx.

Some of the states are updated but some of them are not updated.
Please consider checking 'ComponentDidMount()'. I'm not sure what is going on!
Why are they not getting updated accordingly?
I'm confused!

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]
    };
  }

  ponentDidMount() {
    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>
    );
  }
}

• javascript
• reactjs
• react-router
• frontend
• jsx

Share Improve this question Follow asked Mar 23, 2020 at 8:31 Suraj SinghSuraj Singh 3111 gold badge11 silver badge22 bronze badges 1

• It is worse that state changed by other state. State is better changed by props, or event handler. – Kuo-hsuan Hsu Commented Mar 23, 2020 at 8:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

React docs helps you:

setState() does not always immediately update the ponent. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall.

And also gives you the solution:

Instead, use ponentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied.

So, ensure that you don't use the state, right after updating the state.

It is worse that state changed by other state. It is better state changed by props, or event handler.

For example, this.genNums() is not necessary execute in ponentDidMount()

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

code above could be altered as:

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

And the whole paragraph could be altered:

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
    };
  }

  ponentDidMount() {
    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>
    );
  }
}

The code above, just do setState once, could prevent problem like infinte loop or state update chain.

If you have to do setState chain, use

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"
    })
})

本文标签： javascriptHow to update state using setState based on another state after renderingStack Overflow