Autocomplete set default value not showing

Question

I need to have default value in my autocomplete. I get the select options from database, like this:

let films = await db.collection("films").find().toArray();

Here's the data returned:

[
  0: { title: 'The Shawshank Redemption', year: 1994, isDefault: true },
  1: { title: 'The Godfather', year: 1972, isDefault: false },
  2: { title: 'The Godfather: Part II', year: 1974, isDefault: false },
  3: { title: 'The Dark Knight', year: 2008, isDefault: false } 
  length: 4
  Prototype:....
]

I want the autocomplete shows the data which isDefault: true . I tried the simplest way:

   <Autocomplete
     id="id"
     options={films}
     getOptionLabel={option => option.title}
     defaultValue={films[0]} 
     renderInput={params => (
      <TextField {...params} variant="outlined" />
     )}
   />

It still show nothing in the text field.

But if I hardcoded the options like:

let [films, setFilms] = useState[{
 { title: 'The Shawshank Redemption', year: 1994, isDefault: true },
 { title: 'The Godfather', year: 1972, isDefault: false },
 ...}];

That's work, the autocomplete is showing the default value.

I don't know what's wrong with my data. Any ideas?

Answer 1

您应该尝试执行 setFilms(films[0])，这应该可以

Answer 2

自动完成的缺失value 。