具有数据库数据的材质 UI 选择组件答案

【问题标题】：Material UI Select Component with database data具有数据库数据的材质 UI 选择组件
【发布时间】：2020-09-17 17:27:57
【问题描述】：

我正在尝试使用我的数据库中的数据填充 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();
  })

谢谢！

【问题讨论】：

标签： javascript reactjs material-ui frontend backend

【解决方案1】：

你可以试试这个：

<MenuItem value="">
    <em>None</em>
</MenuItem>
{categorias & categorias.map((categoria) =>
    <MenuItem value={categoria.id}>{categoria.nombre}</MenuItem>
)}

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。

【解决方案2】：

问题是您正在用带有 onChange 事件的对象替换您的类别数组，这意味着类别不再是一个数组，因此它不能使用 .map 这就是您收到错误的原因

你需要做的是创建另一个状态来保存选定的值

import React, { useState, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  }
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const [categorias, setCategorias] = useState([]);
  const [selectedCategorias, setselectedCategorias] = 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);
    };
    getCategorias();
  }, []);

  return (
    <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={selectedCategorias}
        onChange={(ev) => setselectedCategorias(ev.target.value)}
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        {categorias.map((categoria) => (
          <MenuItem key={categoria.id} value={categoria.id}>{categoria.nombre}</MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}

我发现的另一个问题是您缺少 MenuItem 中的 key 道具，并且在您的 useEffect 中您没有任何依赖项，因此它将在无限循环中运行。所以我已经包含了它，所以它只在 mount 上运行。

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

嗨，它确实返回了一个数组。选择组件显示了对象，但是当我选择其中一个时出现错误。
我不认为 Mateial ui drop 可以接受一个对象作为值。如果端点以这种格式返回对象：[{id:1, nombre:1}]，您可能需要另一个状态来存储您从下拉列表中选择的内容，并使用 onChange 更新此状态而不是类别

【解决方案4】：

类别是什么类型？ .map 是数组原型的内置方法。如果类别不是数组，那可能是您的问题。我猜你正在反应，所以尝试控制台记录类别，看看它在运行什么。

【讨论】：