Question

class Select extends React.Component {
  constructor(props){
    super(props);
    this.state = { 
      values: "testing"
    };

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

  handleChange(event){
    this.setState({values: event.target.value});
    this.props.onSelect(this.state.values);
    console.log("valus is " +this.state.values + " event is " + event.target.value);
  }

  render() {
    return (
       <select value={this.state.values} onChange={this.handleChange}>
          <option value="">
            Select one...
          </option>
          {this.props.question.map(obj => (
            <option key={obj.id} value={obj.percentage}>
                {obj.question}
            </option>
          ))}
      </select>
    );
  }
}

现在我正在创建一个选择菜单，默认选择值为空。这里有一个选项（选择一个=“”，问题1 =“ 1”， question2 = 2）我不知道为什么我小鸡问题1，它控制了价值是上一个“测试”，但是event.target.value是正确的。有人可以帮我吗？谢谢

Answer 1

您注意到的行为是由于setState()方法being asynchronous引起的。要将更新后的状态记录到控制台，请考虑通过setState()的回调来执行此操作，当状态更改已应用于组件时，将调用该回调：

handleChange(event){

    this.setState({values: event.target.value}, () => {
        console.log("valus is " + this.state.values + 
                    " event is " + event.target.value);
    });

    this.props.onSelect(this.state.values);
}

Answer 2

正如Dacre所说的，this.setState是异步的。解决此问题的一种更干净的方法是使用async-await。

class Select extends React.Component {
  constructor(props){
    super(props);
    this.state = { 
      values: "testing"
    };

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

  async handleChange(event){
    await this.setState({values: event.target.value});
    this.props.onSelect(this.state.values);
    console.log("valus is " +this.state.values + " event is " + event.target.value);
  }

  render() {
    return (
       <select value={this.state.values} onChange={this.handleChange}>
          <option value="">
            Select one...
          </option>
          {this.props.question.map(obj => (
            <option key={obj.id} value={obj.percentage}>
                {obj.question}
            </option>
          ))}
      </select>
    );
  }
}

在反应中选择选项

2 个答案: