Reactjs 带有材质UI和挂钩的下拉菜单不起作用

我试图使用React钩子和materialui创建一个简单的select标记，但不知道如何在菜单中设置所选项的值

我设法从hooks数组中获取菜单项，但只要选择一个，代码就会中断

const [values, setValues] = React.useState([
    "Bam",
    "Kate",
    "Nicole",
    "Aaron"
  ]);

  function handleChange(event) {
    setValues(oldValues => ({
      ...oldValues,
      [event.target.value]: event.target.value
    }));
  }

我得到这个错误类型错误：values.map不是一个函数

非常感谢您的帮助。

类型错误：values.map不是函数-这意味着您的状态不再是数组。handleChange函数正在将状态转换为对象

看起来您实际上需要的是有一个额外的状态来跟踪，特别是针对所选项目。不需要改变原始状态数组

尝试添加另一个useState：

然后更新handleChange函数以更新该状态：

  function handleChange(event) {
     setSelected(event.target.value)
  }

最后，将“选择标记值”属性连接到选定状态：

---

请参阅working codesandbox:

您好，bamerf，刚刚为您编写了一个解决方案，请告诉我这是否有帮助，并查看沙盒：

const [selected, setSelected] = useState("Bam")

  function handleChange(event) {
     setSelected(event.target.value)
  }

  <FormControl className={classes.formControl}>
     <InputLabel htmlFor="agent-simple">Agent</InputLabel>
       <Select
          value={selected}
          onChange={handleChange}
          inputProps={{
           name: "agent",
            id: "age-simple"
          }}
        >
         {values.map((value, index) => {
            return <MenuItem value={value}>{value}</MenuItem>;
         })}
       </Select>
  </FormControl>