Question

我有两个单选按钮，用于设置数据库中的布尔值“紧急”属性。我尝试手动设置状态，因为由于某些原因，React会将布尔值更改为字符串。这是我的代码：

class Item extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
     urgency: false
   };

  this.radioHandler = this.radioHandler.bind(this);
  }

  radioHandler (e) {
    console.log(this.state.urgency);
    if(e.target.value === "si"){
      this.setState({
        urgency : true
      })
    }
    else if(e.target.value === "no"){
      this.setState({
        urgency : false
     })
    }
    console.log(this.state.urgency);
  }


  render() {
    return (
      <div>       
        <Form>
          <FormGroup>
            <Label for="urgency">Urgencia</Label>
              <div>
                <CustomInput type="radio" id="urgency1" name="urgency" label="Si" value="si" checked={this.state.urgency === true}  inline onChange={this.radioHandler}/>
                <CustomInput type="radio" id="urgency2" name="urgency" label="No" value="no" checked={this.state.urgency === false} inline onChange={this.radioHandler}/>
              </div>
            </FormGroup>
         </Form>
       </div>
     );
   }
 }

我将'urgency'设置为：false作为构造函数的默认值。奇怪的是，如果value =“ si”的this.state.urgency打印并将状态设置为'false'，如果value =“ no”的this.state.urgency打印并将状态设置为'true'，并且两者都即使两者之间有setState，console.log也会打印相同的内容。

我真的很困惑，有更好的方法吗？

Answer 1

setState是异步的。如果在调用this.state之后立即检查setState的值，则会得到旧值而不是新值。如果您需要在状态更新完成后执行某些操作，则可以将第二个参数传递给setState进行回调。您可以在React documentation中详细了解setState的工作方式。

Answer 2

您的console.log（this.state.urgency）正在获取旧值，因为setState（）是异步的，这不同于this.state = {...}，它是同步的，我认为混乱来自何处。

setState（）将放置在组件的事件队列中，并在将来的某个时间调用，但始终在其调用函数完成之后。但是，您可以通过setState（{...}，function（）{...}）强制一些代码在函数完成后执行。

如果更改为以下内容，将会产生您期望的输出：

radioHandler (e) {
    console.log(this.state.urgency);
    if(e.target.value === "si"){
      this.setState({
        urgency : true
      }, function() { console.log(this.state.urgency); })
    }
    else if(e.target.value === "no"){
      this.setState({
        urgency : false
      }, function() { console.log(this.state.urgency); })
    }
}

输入单选按钮错误地设置了布尔值的状态

2 个答案: