Блог

Главная - Вопросы по программированию - Материал-Выбор пользовательского интерфейса не обновляется после обмена

Материал-Выбор пользовательского интерфейса не обновляется после обмена

#javascript #reactjs #material-ui #state

Вопрос:

Я видел эту проблему во всем Интернете, но ничто не могло не дать мне обоснованного объяснения.

Я использую Material-UI Select и хорошее старое setState(…) из React (хотя это не крючки)

Мой компонент состоит в основном из этих строк :

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

И моя проблема в том, что мой компонент Select не обновляет свое значение после выбора другого параметра.

До сих пор я пытался :

  • setState({...this.state, formatToExport : event.target.value}) в onChange= теге выбора и в теге выбора : value = {this.state.formatToExport}
  • setState({...this.state, formatToExport : event.target.value}) в onClick= каждом из вариантов и в теге выбора : value = {this.state.formatToExport} . Но это было только для того, чтобы увидеть обновление, потому что event.target.value в любом случае неправильное
  • и текущая версия моих строк, написанных выше, также onClick ИЛИ onChange (без клонирования состояния, которое должно выполняться только setState).

Это похоже на официальный пример, поэтому я действительно не понимаю, откуда может взяться такое отсутствие обновлений. Независимо от того, что я пытаюсь, отображаемое в данный момент значение компонента Select не меняется, отображается, даже если состояние было правильно обновлено

Спасибо вам за то время, которое вы потратили на то, чтобы прочитать меня !

Ответ №1:

После поиска в течение 3 часов в общей сложности :

обычно value={this.state.formatToExportTo} должно работать ( я попробовал это в одиночку, без остальной части моего приложения, окружающего его) Но так как я сделал некоторые странные вещи с моим this и порядком обновления, мне просто пришлось заменить :

value={this.state.formatToExportTo} Автор: defaultValue={this.state.formatToExportTo}

Вот и все ! Я надеюсь, что это поможет кому-то, кто ответит на этот вопрос

Метки: