如何在渲染后根据另一个状态使用setState更新状态？

How to update state using setState based on another state after rendering?(如何在渲染后根据另一个状态使用setState更新状态？)

问题描述

呈现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>
    );
  }
}

推荐答案

React docs帮助您：

setState()并不总是立即更新组件。它可能 批处理或将更新推迟到以后。这使得阅读成为这一状态。 就在调用setState()之后，这是一个潜在的陷阱。

，还给出了解决方案：

而应使用ComponentDidUpdate或setState回调 (setState(updater，回调))，其中任何一个都保证会触发 在应用更新之后。

因此，请确保您没有在更新状态后立即使用该状态。

这篇关于如何在渲染后根据另一个状态使用setState更新状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！