select 在反应中不更新标签

Question

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

 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>

现在 select 值标签第一次没有更新，我第二次点击它显示上一个标签 selected 并在下一次点击上一个上次显示的标签

我怎样才能让它正常工作 select 标签应该更新！

在此处观看视频以了解标签错误 > video

Answer 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>

希望这会有所帮助

Answer 2

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

forcepdate()

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

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

并这样称呼它：

updateFunc(e){
console(e);
}

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

select 在反应中不更新标签

select in react doesn't update the label

javascript

select

state

setstate

reactjs