Question

我正在尝试使用React Hooks和Material UI创建一个简单的选择标签，但无法弄清楚如何为菜单中的所选项目设置值。

我设法从hooks数组中获取菜单项，但是一旦我选择了其中一个，代码就会中断。

if (df['Status'] == 'Success').all():
    print("=" * 128 + "\n" + "Success")
else:
    print("=" * 128 + "\n" + "Fail")

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

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

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

感谢您的帮助。

Answer 1

TypeError: values.map is not a function-这意味着您的状态不再是数组。您的handleChange函数正在将状态变成对象。

您似乎真正需要的是具有一个附加状态来跟踪，特别是针对所选项目。无需更改原始状态数组。

尝试添加另一个useState()：

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

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

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

最后将Select标签value属性连接到selected state：

  <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>

请参阅工作代码和框：https://codesandbox.io/s/inspiring-wave-z133o

具有Material UI和Hooks的下拉菜单不起作用

1 个答案: