javascript - 具有数据库数据的 Material UI 选择组件

Question

我正在尝试使用我的数据库中的数据填充 Material UI 中的选择组件。我可以成功地显示组件中的数据，但是当我选择一个选项时它会中断并且出现以下错误“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>

这是有关类别的更多代码:

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

谢谢!

Answer 1

常见原因之一可能是类别可能没有默认值，即在其余调用完成之前未定义。

如果你给变量一个像'[]'这样的默认值，它可能会解决你的问题。或者，如果你使用的是 es2020，你可以试试 categorias?.map(...)

我认为，如果您可以显示导致渲染的代码以帮助我们更好地理解问题，那将会很有帮助。

更新:基于 useEffects 代码，您可能需要检查您的端点以确保它为您返回一个对象数组