Question

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

2022-07-08

4187

javascript reactjs material-ui fetch

我尝试在 MUI 自动完成上查看获取的数据，但出现此错误，我不知道为什么，统计数据是从 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

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

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 =＆gt; （option？option.name：“”）}

sultan.h

2022-07-10