Я использую компонент автозаполнения ‘Material UI’, чтобы отобразить раскрывающийся список в моей форме. Однако, если пользователь хочет отредактировать объект, то раскрывающийся список должен отображаться как автозаполненный любым значением, которое выбирается из базы данных.

Я пытался смоделировать ситуацию, используя код ниже

import React, { Component } from 'react'; import Autocomplete from '@material-ui/lab/Autocomplete'; import TextField from '@material-ui/core/TextField'; export default class Sizes extends Component { state = { default: [] } componentDidMount() { setTimeout(() ={amp}gt; { this.setState({ default: [...this.state.default, top100Films[37]]}) }) } render() { return ( {amp}lt;Autocomplete id="size-small-standard" size="small" options={top100Films} getOptionLabel={option ={amp}gt; option.title} defaultValue={this.state.default} renderInput={params ={amp}gt; ( {amp}lt;TextField {...params} variant="standard" label="Size small" placeholder="Favorites" fullWidth /{amp}gt; )} /{amp}gt; ); } } 

Здесь после монтирования компонента я устанавливаю таймаут и возвращаю значение по умолчанию, которое должно отображаться в раскрывающемся списке.

Тем не менее, он не может отобразить значение в раскрывающемся списке, и я вижу эту ошибку в консоли —

 index.js:1375 Material-UI: the `getOptionLabel` method of useAutocomplete do not handle the options correctly. The component expect a string but received undefined. For the input option: [], `getOptionLabel` returns: undefined. 

Очевидно, состояние обновляется при вызове componentDidMount, но свойство defaultValue компонента Autocomplete не может прочитать то же самое

Есть идеи, что я могу ошибаться здесь?

Ссылка песочницы кода — https://codesandbox.io/s/dazzling-dirac-scxpr?fontsize=14{amp}amp;hidenavigation=1{amp}amp;theme=dark

Хорошо, я действительно смог сделать эту работу. Оказывается, я использовал неправильную опору. Я просто изменил defaultValue на value и это сработало.

Обновлена ​​ссылка на кодовую ручку — codesandbox.io/s/dazzling-dirac-scxpr