Material-UI Select 在 onChange 后不会更新

Paz*_*zka 4 javascript state reactjs material-ui

我在网络上到处都看到过这个问题,但没有什么可以给我一个有效的解释。

我正在使用 Material-UI Select 和 React 中好的 ol' setState(...) (不过不是钩子)

我的组件基本上由这些行组成:

class MyComponent extends Component {

exportOptions = ['CSV','SDF']

  constructor(props) {
    super(props);
    this.state = {
[...]
      formatToExportTo : this.exportOptions[0]
    };

[...]

<Select value={this.state.formatToExportTo}
        style={{width : "10em"}}
        onChange={event=> {
            this.setState({formatToExportTo : event.target.value})
        }}>{
            this.exportOptions.map(f=><MenuItem key={f} value={f}>{f}</MenuItem>)
        }</Select>,

Run Code Online (Sandbox Code Playgroud)

我的问题是我的选择组件在选择另一个选项后不会更新其值。

到目前为止我已经尝试过:

  • setState({...this.state, formatToExport : event.target.value})onChange=Select 和 Select 标签中:value = {this.state.formatToExport}
  • setState({...this.state, formatToExport : event.target.value})onClick=每个选项的 和选择标签中:value = {this.state.formatToExport}。但这只是为了看到更新,因为 event.target.value 无论如何都不正确
  • 我上面写的行的当前版本也是 onClick 或 onChange (没有应该由 setState 单独完成的状态克隆)。

就像官方示例一样,所以我真的不明白这种缺乏更新的情况来自哪里。无论我尝试什么,即使状态已正确更新,选择组件的当前显示值也不会更改

感谢您花时间阅读我的文章!

Paz*_*zka 9

总共搜索了 3 个小时后:

通常value={this.state.formatToExportTo}应该可以工作(我单独尝试了它,而没有围绕它的应用程序的其余部分)但是由于我用我的this和更新顺序做了一些奇怪的事情,我只需要替换:

value={this.state.formatToExportTo}经过defaultValue={this.state.formatToExportTo}

就这样 !我希望它能帮助那些提出这个问题的人