在反应中选择不会更新标签答案

【问题标题】：select in react doesn't update the label在反应中选择不会更新标签
【发布时间】：2020-05-14 02:22:49
【问题描述】：

当我实施时，它运行良好：

 constructor() {
        super(...arguments);
        this.state={
          selectedValue :'' ,
}}

下拉代码：

            <select
            className="ui dropdown"
          value={this.state.selectedValue || ''}
          onChange={e =>
            this.setState({
              selectedValue: e.target.value,
              validationError:
                e.target.value === ""
                  ? "You must select"
                  : ""
            })
          }>
          <option value="">--Select Station--</option>
          {this.state.stationList.map(team => (
            <option key={team.id} value={team.id}>
              {team.station}
            </option>
          ))}
        </select>

现在在第一次选择值标签时不会更新，第二次单击它时会显示上一个标签，然后在下一次单击上一次显示标签时显示

我怎样才能让它在选择标签上正常工作应该更新！

请参阅此处的视频以了解标签错误 > video

【问题讨论】：

尝试在 onChange 中改为函数式 setState。
你的代码看起来不错，我刚刚创建了一个codesanbox 来审查它，但它工作正常，你是怎么得到这个问题的，你能详细说明一下吗？
@MuhammadAli 我试过了，但对我没用！谢谢
@RicardoGonzalez 是的，我在另一个文件中有相同的代码，它工作正常，它在实施时也能正常工作，但现在不行了！感谢演示！

标签： javascript reactjs select state setstate

【解决方案1】：

您的代码运行良好，我认为它们是您阵列中的问题

在代码沙箱上检查此代码

check the given code

或者你可以看到这个

class App extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      selectedValue: ""
    };
  }
  myArray = [
    { id: "1", name: "one" },
    { id: "2", name: "two" },
    { id: "3", name: "three" }
  ];

  render() {
    console.log(this.state.selectedValue);
    return (
      <div>
        <h1>are you listening</h1>
        <select
          className="ui dropdown"
          value={this.state.selectedValue}
          onChange={e =>
            this.setState({
              selectedValue: e.target.value,
              validationError: e.target.value === "" ? "You must select" : ""
            })
          }
        >
          <option value="">--Select Station--</option>
          {this.myArray.map(team => (
            <option key={team.id} value={team.id}>
              {team.name}
            </option>
          ))}
        </select>
      </div>
    );
  }
}
export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

希望这会有所帮助

【讨论】：

我仍然面临标签错误，它没有更新标签，它的工作发现并在控制台中显示值并执行操作意味着它有效，我面临的所有问题都是标签，它没有改变在第一次点击时，从下一次点击我看到以前的状态被选中
你说的是哪个标签，你能解释一下标签吗？ @Ansh
解释标签？ @AnshVarun
看看你能不能从这个[视频](files.fm/u/cdszjt6w)中理解
我面临的问题是 setState 这个函数确实更新但不是立即更新，我使用 value = {this.forceUpdate(this.state.selectedValue)} 为我做状态更新但仍然是1) 无法对未安装的组件执行 React 状态更新。 2) 无法对未安装的组件执行 React 状态更新。最终 forceUpdate() 有效，但不是正确的方法

【解决方案2】：

我不知道它不应该工作，但我尝试使用

forcepdate()

它与警告一起工作，所以我做到了：

 value={this.updateFunc(this.state.selectedValue)}

并称它为：

updateFunc(e){
console(e);
}

我认为这不是正确的方法，但现在这对我有用，所以我选择了这个，状态不会立即更新，使用 forceUpdate() 的想法让我做出了这个决定。

【讨论】：