value在MUI自动完成时返回0或未定义，无法在多个属性中获取值

Question

在属性为多个的MUI自动完成组件上，当我们选择所选选项中的任何一个时，值prop返回0或未定义。

<Autocomplete
  value={v.education}
  onChange={handleEducationChange}
  className={classes.textOutline}
  multiple
  id="virtualize-demo"
  name="education"
  style={{ width: 600 }}
  disableCloseOnSelect
  ListboxComponent={ListboxComponent}
  options={educationList()}
  getOptionLabel={(option) => option.title}
  isOptionEqualToValue={(option, value) =>
    option.title === value.title
  }
  renderOption={(props, option, { selected }) => (
    <li {...props}>
      <Checkbox
        icon={icon}
        checkedIcon={checkedIcon}
        style={{ marginRight: 8 }}
        checked={selected}
      />
      {option.title}
    </li>
  )}
  renderInput={(params) => (
    <TextField
      {...params}
      variant="outlined"
      name="education"
      placeholder="Select your Qualification"
      label="Education"
      fullWidth
    />
  )}
/>

  // handleEducationChange
  const initialState = { education: "", occupation: "" };
  const [selectedOption, setSelectedOption] = useState([], initialState);
  const handleEducationChange = (event) => {
    const { name, values } = event.target;
    setSelectedOption({ ...selectedOption, [name]: values });
    console.log(values);
  };

我需要选择的值与值prop传递，可以验证并发布到后端…请更新此解决方案，谢谢。

Answer 1

必须将values更改为value，并删除useState中的数组:

   // handleEducationChange
  const initialState = { education: "", occupation: "" };
  const [selectedOption, setSelectedOption] = useState(initialState);
  const handleEducationChange = (event) => {
    const { name, value } = event.target;
    setSelectedOption({ ...selectedOption, [name]: value });
    console.log(value);
  };