解决Material UI Autocomplete多选标签仅保存最后一项到state的问题

问题原因 #

• 你错误将值绑定和变化监听逻辑放在了内部的TextField组件上，多选模式下的Autocomplete组件本身才是管理所有已选标签数组的主体：
  • 内部TextField的onChange仅能捕获你当前正在输入的单条待确认文本，无法拿到已经生成Chip的所有已选标签集合
  • value属性应该绑定在Autocomplete组件上，而非内部的TextField，否则组件无法正确同步已选的所有标签数组
• 你之前的写法每次输入新标签时，都用当前输入的单个文本覆盖了essentials数组，所以最终只会保存最后一个输入的标签。

修复方案 #

把value属性和onChange回调移到Autocomplete组件上即可，修改后完整代码如下：

<Autocomplete
  multiple
  id="tags-standard"
  options={Examples.map((option) => option.title)}
  freeSolo
  // 已选值绑定到Autocomplete组件
  value={potluckData.essentials}
  // 监听Autocomplete的已选数组变化
  onChange={(event, newValue) => {
    setPotluckData({
      ...potluckData,
      essentials: newValue
    })
  }}
  renderTags={(value, getTagProps) =>
    value.map((option, index) => (
      <Chip
        variant="standard"
        label={option}
        {...getTagProps({ index })}
      />
    ))
  }
  renderInput={(params) => (
    <TextField
      {...params}
      variant="standard"
      name="Essentials"
      label="Essentials"
      margin="normal"
      placeholder="Essentials"
    />
  )}
/>

注意初始化potluckData时要保证essentials的初始值为空数组[]，避免类型不匹配报错。

内容的提问来源于stack exchange，提问作者Gordon Maloney