MUI 自动完成默认值未显示？

Question

import * as React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";

export default function ComboBox() {
  const [top100Films, settop100Films] = React.useState([]);
  const value = 1;
  React.useEffect(() => {
    fetch("https://reqres.in/api/users?page=1")
      .then((res) => res.json())
      .then(({ data }) => {
        console.log(data);
        settop100Films(data);
      })
      .catch((err) => console.log(err));
  }, []);
  // if (!top100Films.length > 0) {
  //   return "";
  // }
  return (
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      defaultValue={
        top100Films.find((ele) => ele.id === value) || null
      }
      options={top100Films}
      getOptionLabel={(data) => data.first_name}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Movie" />}
    />
  );
}

如果我取消注释此 if 条件，它就可以正常工作。但我不想要这种行为。最初 defalutValue 将为 null。获取数据后，默认值将更改为精确值。但该值未显示在自动完成中。

Answer 1

在defaultValue中你不应该使用console.log，你可以尝试这样：

value ={top100Films}