如何将 json 文件中的元素设置为 React 组件答案

【问题标题】：How to set elements from a json file into a React component如何将 json 文件中的元素设置为 React 组件
【发布时间】：2022-01-10 01:04:42
【问题描述】：

我尝试使用 react 为我的网站创建一个选择组件，当您编写它时它工作正常，但是当使用 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 文件：

{
    "name" : "background",
    "items" : ["red", "orange", "yellow" , "green" , "cyan" ,"blue" , "avax" , "beach", "winter" , "summer" , "desert", "forest"]
}

【问题讨论】：

你从哪里得到元素？一个库，还是自定义的？

标签： reactjs json select components

【解决方案1】：

我们以错误的方式使用AllItems。在这种情况下，AllItems 本身就是一个组件，所以当用户点击呈现在AllItems 组件内部的MenuItem 时，Select 组件不会收到Change 事件。

解决这个问题的方法是使AllItems 成为一个函数，而不是一个组件。考虑下面的 sn-p。

  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

【讨论】：

是的，现在可以了，谢谢！！