反应选择元素值将状态设置为先前选择的选项值？答案

【问题标题】：React select elements value is setting state to the previous selected options value?反应选择元素值将状态设置为先前选择的选项值？
【发布时间】：2020-05-30 00:36:49
【问题描述】：

在我的 React 中的 select 元素上，前几个选择不会更改值，但随后它们开始将值更改为上一个选择的选项，例如如果我选择选项 FRITOS，则值未定义，然后当我选择选项 COFFEE，值是 FRITOS，然后当我再次选择 FRITOS 时，值变为 COFFEE。真的很困惑这是怎么回事哈哈。

设置状态的函数

  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>

【问题讨论】：

这能回答你的问题吗？ Why calling react setState method doesn't mutate the state immediately?
setState 方法异步工作，因此您不能依赖 changeGroup 函数的第一行改变状态。在函数内使用 event.target.value 而不是 this.state.groupSelected ，您可能会实现您想要的
修复方法是根据当前状态和event 组合一个新的状态对象，并在 setState 调用和 props 方法调用中使用它。
@RanderGabriel 我正在使用 event.target.value？
在我的评论中，我的意思是 this.state 上的值不会在你调用 setState 后立即发生变化，所以如果你访问 this.state 它实际上是在存储之前的值

标签： javascript reactjs jsx

【解决方案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"));

这里是the repro on Stackblitz

自从您使用 this.setState 以来，我一直使用旧方法，但如果可以，迁移到最新版本的 react 并使用功能组件和钩子，这将不再是问题。

【讨论】：