如何提供解決此 Material UI 警告的值？

Question

我正在從后端（Node.js）到前端（React）獲取 API 數據（類別名稱）。 目前，我的目標是從 Material UI 填充 Select 組件。 為了獲取 API 數據，我在后端使用 Express 和 Request； Axios 在前端。 顯然，它有效，Select 組件得到了正確的選項列表，但出現了這個控制台警告：

Material-UI：您為 select 組件提供了超出范圍的值``。 考慮提供與可用選項之一或“”匹配的值。 可用的值是animal 、 career 、 celebrity 、 dev 、 explicit 、 fashion 、 food 、 history 、 money 、 movie 、 music 、 political 、 religion 、 science 、 sport 、 travel 。

這些引用值來自獲取的 API 數據，但我不知道如何更正。 歡迎任何幫助。 這是我的代碼：

export default function Home() {
  const classes = useStyles();
  const [list, setList] = useState([]);
  const [categoryName, setCategoryName] = useState([]);

  useEffect(() => {
    axios
      .get("/getCategories")
      .then((response) => {
        setList(response.data.categories);        
      })
      .catch((e) => {
        console.log(e.response.data);
      });
  }, []);

  const handleChange = (event) => {
    setCategoryName(event.target.value);    
  };

  return (
    <div className={classes.root}>      
      <FormControl>
        <InputLabel id="category-label">Category</InputLabel>
        <Select         
          labelId="category-label"
          id="category"
          value={categoryName}
          onChange={handleChange}
        >
          {list.map((item) => (
            <MenuItem key={item} value={item}>
              {item}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}

Answer 1

您應該將categoryName初始化為空字符串而不是Array

Answer 2

添加這個defaultValue = ""像這樣<Select... defaultValue="" >

更多詳情請參考此github

Answer 3

一切都很好，但你之前只需要一些改變

const [categoryName, setCategoryName] = useState([]);

后

 const [categoryName, setCategoryName] = useState('');

不要將 categoryName 默認值用作數組或名稱（因為 useEffect 在渲染后運行。所以在 useEffect 調用您在類別列表中設置的值之后第一次未設置值，它會檢查該值是否存在於類別列表中，否則它會產生一個警告），一個警告意味着您在 select 中添加 value(value={categoryName}) ，這不在您的列表中使用 defaultValue 選項的最佳方式，但無論如何您只需將您的 categoryName 值設置為空，您就可以了解 useEffect以及它是如何工作的https://stackblitz.com/edit/react-hmdhsf?file=src/home.js