Uncaught TypeError: Cannot read properties of undefined (reading 'name') | Material UI

Question

I'm trying to view the fetched data on MUI Autocomplete, but I get this error I don't why, the stat is fetched from MongoDB and I'm just trying to view the name of the category as an option.

The Code:

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>
)
} 

This is how the data is showing in Mongodb

Answer 1

you can add nullish coalescing operator (??) for options of Autocomplete. it's for situation when the options is empty or server response has error. one more thing, the options of Autocomplete should be arrays of object then you can set name property for options label.

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 : "")}