材质 UI 可搜索的选择输入不更新 UI答案

【问题标题】：Material UI searchable select input not updating UI材质 UI 可搜索的选择输入不更新 UI
【发布时间】：2020-09-07 13:38:52
【问题描述】：

我使用了 Material UI 的自动完成组件来创建一个可搜索的选择输入。我将选项传递给它，这是一个包含所有可能选项的字符串数组。

<Grid item xs = {props.xs} className = {classes.formItem}>
    <Autocomplete
    multiple
    options = {props.options}
    disableCloseOnSelect
    getOptionLabel = {( option ) => option}
    renderOption = {( option, {selected} ) => (
      <React.Fragment>
      <Checkbox
        icon = {icon}
        checkedIcon = {checkedIcon}
        style = {{ marginRight: 8 }}
        checked = {selected}
        onChange = {props.onChange( option, selected )}
      />
        {option}
      </React.Fragment>
    )}
    renderInput = {( params ) => (
      <TextField {...params} variant = "outlined" label = {props.label} />
    )}
    />
  </Grid>

有时我想从之前选择的 api 中获取选项。但是，当我将此选项列表传递给组件时，它不会在 UI 中显示已经选择了哪些选项。如下所示，根据我的“编辑”道具，我将组件的选定选项初始化为空数组或先前选择的选项数组

const [collaborators, setCollaborators] = React.useState( props.edit ? currentProject.collaborators : [] )

有人知道为什么 UI 不显示所选选项吗？

谢谢

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

嗨，如果有人遇到这个问题，我通过正确阅读文档解决了这个问题，自动完成组件包含一个 defaultValue 道具，它可以传递一个您希望从一开始就选择显示的选项数组。

【讨论】：