React select elements value устанавливает состояние на предыдущее значение выбранных опций?

Question

В моем элементе select в React первая пара выборок не меняет значение, но затем они начинают изменять значение на предыдущий выбранный параметр, например, если я выберу параметр FRITOS, значение не определено, затем Я выбираю параметр КОФЕ, значение - ФРИТОС, а затем, когда я снова выбираю ФРИТОС, значение переходит в КОФЕ. Действительно запутал, что происходит, ха-ха.

Моя функция, которая устанавливает состояние

  changeGroup = (event) => {
    this.setState({ [event.target.name]: event.target.value });
    console.log(this.state.groupSelected);
    const bugQuery = {
      GroupID: this.state.groupSelected,
    };
    console.log(bugQuery);
    console.log(this.props.bugs);
    if (this.state.groupSelected !== undefined) {
      this.props.getBugs(bugQuery);
    }
  };

Мой элемент выбора

     <select
                style={{ border: "1px solid white", fontSize: "2.7vh" }}
                name="groupSelected"
                value={this.state.groupSelected}
                onChange={this.changeGroup}
              >
                <option value="FRITOS">FRITOS</option>
                <option value="5AFSA">5AFSA</option>
                <option selected>Groups</option>
    </select>

Answer 1

[Предыдущий ответ был глупым, давайте отредактируем!]

Вы можете запустить повторную визуализацию, поместив свой выбор в компонент:

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";

class App extends Component {
  constructor() {
    super();

    this.options = ["FRITOS", "SAFSA"];

    this.state = {
      name: "React",
      groupSelected:''
    };
  }

  changeGroup = event => {
    this.setState({[event.target.name]: event.target.value }, () => console.log(this.state.groupSelected));

  };

  render() {
    return (
      <div>
        <Hello name={this.state.name} />

        <MySelect 
          options={this.options} 
          selectedOption={this.state.groupSelected} 
          onSelectChange={this.changeGroup} />

        <div>groupSelected = {this.state.groupSelected}</div>
      </div>
    );
  }
}

class MySelect extends Component {
  constructor(props) {
    super(props);

    this.options = ["FRITOS", "SAFSA"];
  }

  buildSelectOptions = () => {
    return this.props.options.map(option => (
      <option key={option} value={option}>
        {option}
      </option>
    ));
  };

  render() {
    return (
      <>
        <select
          style={{ border: "1px solid white", fontSize: "2.7vh" }}
          name="groupSelected"
          value={this.props.groupSelected}
          onChange={this.props.onSelectChange}
        >
          {this.buildSelectOptions()}
          <option selected>Groups</option>
        </select>
      </>
    );
  }
}

render(<App />, document.getElementById("root"));

Вот репро на Stackblitz

Я сохранил его по-старому, так как вы используете this.setState, но если можете, перейдите к последней версии реакции и используйте функциональные компоненты и хуки, это не будет больше не будет проблемой.