来自状态 materialUI 的动态 MenuItem

Question

我正在尝试根据性别状态显示不同的菜单项列表，但遇到了一些问题。下面是常量值。

const maleArray = ["A", "B", "C", "D"]
const femaleArray = ["E", "F", "G"]
const [gender ,setGender] = useState("")

const genderItems = () => {
    if (gender === null) { return }
        else if (gender === "male") {
            maleArray.map(item => (
                <MenuItem key = {item} value={item}>{item}</MenuItem>
            ))
        } else {
             femaleArray.map(item => (
                <MenuItem key = {item} value={item}>{item}</MenuItem>
            ))
        }
    }

我正在使用 Material UI MenuItems。

<InputLabel id="gender">Gender</InputLabel>
                               
   <Select
     labelId="gender"
     id="gender"
     fullWidth
     label="Gender"
     value={gender}
     onChange={handleGenderChange}
    >
    {genderItems()}
   </Select>

当性别状态更改为男性或女性时，我想填充 MenuItem 下拉列表。我正在调用 genderItems，它希望呈现 MenuItem 组件，但它没有显示任何内容。

Answer 1

你能不能试试退货。

const genderItems = () => {
  if (gender === null) {
    return;
  } else if (gender === "male") {
    return maleArray.map((item) => (
      <MenuItem key={item} value={item}>
        {item}
      </MenuItem>
    ));
  } else {
    return femaleArray.map((item) => (
      <MenuItem key={item} value={item}>
        {item}
      </MenuItem>
    ));
  }
};

同时确保您的性别状态正在更新。

来自状态 materialUI 的动态 MenuItem

Dynamic MenuItem from state materialUI

javascript

reactjs

material-ui

menuitem