Javascript 材质UI选择包含数据库数据的组件

我正试图用数据库中的数据填充Material UI中的select组件。我可以成功地在组件中显示数据，但当我选择一个选项时，它会中断，并显示以下错误“categorias.map不是函数”。有人知道我做错了什么吗？ 代码如下：

<FormControl className={classes.formControl}>
  <InputLabel id="demo-simple-select-label">Categorias</InputLabel>
    <Select
      labelId="demo-simple-select-filled-label"
      id="demo-simple-select-filled"
      value={categorias}
      onChange={(ev) => setCategorias(ev.target.value)}
    >
      <MenuItem value="">
        <em>None</em>
      </MenuItem>
      {categorias.map((categoria) =>
        <MenuItem value={categoria.id}>{categoria.nombre}</MenuItem>
      )}
    </Select>
</FormControl>

---

谢谢大家!

什么类型的分类。map是数组原型的内置方法。如果类别不是数组，那可能是您的问题。我猜您是在react中，所以请尝试将console记录类别以查看它在运行时的状态。

常见原因之一可能是categorias可能没有默认值，即在rest调用完成之前未定义

如果您给变量一个像“[]”这样的默认值，它可能会解决您的问题。或者，如果您使用的是es2020，您可以尝试categorias？.map（…）

我认为，如果您可以显示渲染前的代码，以帮助我们更好地理解问题，这将非常有帮助

---

更新：基于useffects代码，您可能希望检查端点以确保它为您返回一个对象数组

Hi，它确实返回了一个数组。选择组件会显示对象，但当我选择其中一个对象时，就会显示错误。我认为Material ui drop无法接受对象作为值。如果端点以以下格式返回对象：[{id:1，nombre:1}]，则可能需要另一个状态来存储下拉列表中的选择，而onChange则更新此状态而不是categorias

const [categorias, setCategorias] = useState([]);


  useEffect(() => {

      const getCategorias = async () => {
        const res = await fetch("/categories", {
            method: 'GET',
            headers: {'Content-Type': 'application/json'},
        })
        //console.log(res);
        const response = await res.json();
        setCategorias(response);
        console.log(categorias);
      }
      getCategorias();
  })