未捕获的类型错误：无法读取未定义的属性（读取“名称”）| 材质界面

Question

我正在尝试在 MUI Autocomplete 上查看获取的数据，但我得到了这个错误，我不知道为什么，统计数据是从 MongoDB 获取的，我只是想查看类别的名称作为选项。

编码：

export default function ChooseCat() {

  const [categories, setCats] = useState([]);

  useEffect(() => {
    const getCats = async () => {
      const res = await axios.get("/categories");
      setCats(res.data);
    };
    getCats();
  }, []);
  console.log(categories)

return(
    <div>
      <Autocomplete
        multiple
        id="tags-standard"
        options={categories}
        getOptionLabel={(c) => c.name}
        defaultValue={[categories[3]]}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="standard"
            label="Multiple values"
            placeholder="Favorites"
          />
        )}
      />
  </div>
)
} 

这就是数据在 Mongodb 中的显示方式

Answer 1

您可以为自动完成选项添加无效合并运算符 (??)。 适用于选项为空或服务器响应有错误的情况。 还有一件事，自动完成的选项应该是对象数组，然后您可以为选项标签设置名称属性。

export default function ChooseCat() {

  const [categories, setCats] = useState([]);

  useEffect(() => {
    const getCats = async () => {
      const res = await axios.get("/categories");
      setCats(res.data);
    };
    getCats();
  }, []);
  console.log(categories)

return(
    <div>
      <Autocomplete
        multiple
        id="tags-standard"
        options={categories ?? [] }
        getOptionLabel={(c) => c.name}
        defaultValue={[categories[3]]}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="standard"
            label="Multiple values"
            placeholder="Favorites"
          />
        )}
      />
  </div>
)
} 

Answer 2

所以我添加了这个并且它起作用了getOptionLabel={option => (option ? option.name : "")}