React Radiobutton только запускает onChange, когда не отмечен

Question

У меня есть некоторые проблемы с переключателями в React.js. По какой-то причине только что невыбранная кнопка вызывает событие onChange, а выбранная кнопка ничего не делает. В настоящее время я могу получить только значение ранее выбранной радиокнопки.

Я управляю событием изменения внутри моего App.js и передаю его в RadioButtons.jsx в качестве поддержки

Внутри App.js:

constructor(){
    super();
    
    this.state = {
        selectedOption: "medium_term"
    }
  }
  
  handleOptionChange = changeEvent => {
       
        this.setState({
            selectedOption: changeEvent.target.value

        });
        this.getTop10();
        
        console.log(this.state.selectedOption); //shows previous button
    };
    
    render() {
    return (
      <div className="App">          
          <RadioButtons onChange={this.handleOptionChange} selectedOption={this.state.selectedOption}/>
      </div>
    );
  }
}

Пример: одна из моих радиокнопок

<div className="radio row mx-1 my-0">
  <label>
      <input
          type="radio"
          name="timeframe"
          value="medium_term"
          onChange={this.props.onChange}
          checked={this.props.selectedOption === "medium_term"}
          className="form-check-input"
      />
      the last 6 months
  </label>
</div>

Answer 1

setState является асинхронным, поэтому, если вы попытаетесь записать в журнал состояние, вместо него будет возвращено предыдущее состояние.

Если вы хотите console.log новое установленное состояние сразу после установки состояния, вам нужно сделать это в обратном вызове setState(), например:

this.setState({
    selectedOption: changeEvent.target.value
}, function() {console.log(this.state.selectedOption); });

this.getTop10();