Question

我写了下面的react组件来处理我使用react制作的扫雷克隆的难度级别。

我已使用单选按钮作为难度输入，并希望根据所做的选择来设置组件的状态。

我的问题是，每次更改选择时，状态都会用我先前的选择而不是当前选择的值进行更新。例如，在页面加载期间，所选难度为“轻松”。当我将难度更改为“难”时，状态仍显示初始设置，即“简单”（我做了状态的控制台日志以验证这一点）。

请帮助。

import React, {Component} from 'react';

class Difficulty extends Component{

  state = {
      height: 8,
      width: 8,
      mines: 10,
  };

  setDifficulty(event){
    let selectedDifficulty = event.target.value;
    if (selectedDifficulty === "Easy") {
        this.setState({
            height: 8,
            width: 8,
            mines: 10,
        });
    }
    if (selectedDifficulty === "Medium") {
        this.setState({
            height: 12,
            width: 12,
            mines: 20,
        });
    }
    if (selectedDifficulty === "Hard") {
        this.setState({
            height: 16,
            width: 16,
            mines: 40,
        });
    }
    this.props.updateDifficulty(this.state);
  }

  render(){
    return(
      <div className="game-difficulty">
        <div className="difficulty" onChange={this.setDifficulty.bind(this)}>
          <input type="radio" value="Easy" name="gender" defaultChecked="true" /> Easy
          <input type="radio" value="Medium" name="gender" /> Medium
          <input type="radio" value="Hard" name="gender" /> Hard
        </div>
      </div>
    );
  }
}

export default Difficulty;

Answer 1

setState是异步的，因此，如果您在调用this.state之后立即尝试使用setState，它将仍然包含以前的值。

您可以改为在this.state的第二个参数中给出的函数中执行依赖于setState的逻辑，该函数将在状态更新后运行。

setDifficulty(event) {
  let selectedDifficulty = event.target.value;
  let values;

  if (selectedDifficulty === "Easy") {
    values = {
      height: 8,
      width: 8,
      mines: 10
    };
  }
  if (selectedDifficulty === "Medium") {
    values = {
      height: 12,
      width: 12,
      mines: 20
    };
  }
  if (selectedDifficulty === "Hard") {
    values = {
      height: 16,
      width: 16,
      mines: 40
    };
  }

  this.setState(values, () => {
    this.props.updateDifficulty(this.state);
  });
}

反应setstate取以前的值

1 个答案: