使用React MUI的Autocomplete组件时无法看到下拉选项

你的Autocomplete组件点击后不显示下拉选项，核心问题出在options的处理和renderOption的不匹配，另外还有一些细节需要调整：

核心问题：options与renderOption的类型不匹配 #

你通过myData.map(option=>option.desc)把options转成了字符串数组，但在renderOption里却试图访问option.desc——此时option已经是字符串，不存在desc属性，导致渲染的下拉项内容为空，看起来就是没有加载出选项。

两种修正方案 #

方案1：保留原对象数组作为options（推荐） #

如果myData是包含desc字段的对象数组，直接传递原数组给options，并通过getOptionLabel指定选项的显示文本，逻辑更清晰也方便后续扩展：

<Autocomplete
    id='demo-1'
    style={{ height: '30px', margin: '14px 0px', width: '362px', padding: '2px', fontSize: 'small' }}
    options={myData} // 直接传入对象数组
    getOptionLabel={(option) => option.desc} // 指定每个选项的显示文本
    size='small'
    disableClearable
    multiple
    onChange={(e, data) => setSelectedSource(data.map(item => item.desc))} // 如需存储desc字符串，转换后存入状态
    renderOption={(props, option) => (
        <li {...props}>
            <Checkbox
                className={classes.checkBoxClass}
                checked={selectedSource.includes(option.desc)}
                onChange={() => {}}
            />
            {option.desc} // 此时option是原对象，可正常访问desc
        </li>
    )}
    renderInput={(params) => (
        <TextField {...params}
            variant='outlined'
            placeholder='select options'
        />
    )}
/>

方案2：继续使用字符串数组作为options #

如果坚持要把options转成字符串数组，需要修改renderOption，直接使用option本身（因为此时它就是desc字符串）：

<Autocomplete
    id='demo-1'
    style={{ height: '30px', margin: '14px 0px', width: '362px', padding: '2px', fontSize: 'small' }}
    options={myData.map(option=>option.desc)} // 字符串数组
    size='small'
    disableClearable
    multiple
    onChange={(e, data) => setSelectedSource(data)}
    renderOption={(props, option) => (
        <li {...props}>
            <Checkbox
                className={classes.checkBoxClass}
                checked={selectedSource.includes(option)}
                onChange={() => {}}
            />
            {option} // 直接渲染字符串option
        </li>
    )}
    renderInput={(params) => (
        <TextField {...params}
            variant='outlined'
            placeholder='select options'
        />
    )}
/>

额外检查点 #

• 确认myData是否有数据：可以在组件内添加console.log(myData)，检查数组是否为空或未正确加载。
• 检查selectedSource的初始值：如果是多选模式，初始值应该是数组类型（比如const [selectedSource, setSelectedSource] = useState([])）。

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