材質 UI Select 帶有數據庫數據的組件

Question

我正在嘗試使用我的數據庫中的數據填充 Material UI 中的 select 組件。 我可以成功顯示組件中的數據，但是當我 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>

這是有關類別的更多代碼：

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

常見原因之一可能是類別可能沒有默認值，即在 rest 調用完成之前未定義。

如果你給變量一個像'[]'這樣的默認值，它可能會解決你的問題。 或者，如果你使用的是 es2020，你可以試試 categorias?.map(...)

我認為，如果您可以顯示導致渲染的代碼以幫助我們更好地理解問題，那將會很有幫助。

更新：基於 useEffects 代碼，您可能需要檢查您的端點以確保它為您返回一個對象數組

Answer 2

類別是什么類型？ .map 是 arrays 原型的內置方法。 如果類別不是數組，那可能是您的問題。 我猜你正在反應，所以嘗試控制台記錄類別，看看它在運行什么。

Answer 3

你可以試試這個：

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

Answer 4

問題是您正在用帶有 onChange 事件的 object 替換您的類別數組，這意味着類別不再是一個數組，因此它無法使用。map 這就是您收到錯誤的原因

您需要做的是創建另一個 state 來保存選定的值

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 中您沒有任何依賴項，因此它將在無限循環中運行。 所以我已經包含了它，所以它只在安裝時運行。