如何將 json 文件中的元素設置為 React 組件

Question

我嘗試使用 react 為我的網站創建一個 select 組件，當您編寫它時它工作正常，但是當使用 json 文件中的數據時，您可以看到所有選項，但是當您單擊一個時，它沒有被選中。 你可以在下面找到我的代碼：

 function BasicSelect(props) {
    let AllItems = () => props.category.items.map((item) => <MenuItem value={item}>{item}</MenuItem>)

    const [item, setItem] = React.useState('');

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

    return (
        <Box sx={{ minWidth: 130 }}>
            <FormControl fullWidth>
                <InputLabel id="demo-simple-select-label">{props.category.name}</InputLabel>
                <Select
                    labelId="demo-simple-select-label"
                    id="demo-simple-select"
                    value={item}
                    label={"Item"}
                    onChange={handleChange}
                    onClick={handleChange}
                >
                <AllItems/>
                </Select>
            </FormControl>
        </Box>
    );
}

這是我的 Json 文件：

{“名稱”：“背景”，“項目”：[“紅色”，“橙色”，“黃色”，“綠色”，“青色”，“藍色”，“avax”，“海灘”，“冬天”， “夏天”、“沙漠”、“森林”] }

Answer 1

我們以錯誤的方式使用AllItems 。 在這種情況下， AllItems本身就是一個組件，因此當用戶單擊呈現在AllItems組件內的MenuItem時， Select組件不會收到Change事件。

解決此問題的方法是使AllItems成為 function，而不是組件。 考慮下面的代碼片段。

  const renderAllItems = () =>
    props.category.items.map((item, index) => (
      <MenuItem value={item} key={`${props.category}-${index}`}>
        {item}
      </MenuItem>
    ));

...

        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={item}
          label={"Item"}
          onChange={handleChange}
        >
          {renderAllItems()}
        </Select>

在這里您可以找到完整的工作示例。 https://codesandbox.io/s/gallant-shockley-lwhl8?file=/src/App.js