Material-UI Autocomplete组件setState赋值后不显示问题求助

针对你遇到的问题，核心问题出在代码的两处错误，修复后即可正常显示选中值：

• 修复renderOption的错误写法
  你当前的renderOption返回了一个空函数，这会导致Autocomplete无法正确渲染选项，也会影响选中值的展示逻辑。正确的写法应该返回一个React节点，比如：

  renderOption={(props, option) => (
    <li {...props}>{option.label}</li>
  )}
  

• 补充必填的renderInput配置
  Autocomplete组件必须搭配renderInput来渲染输入框，这是组件正常工作的必要条件，示例配置如下：

  renderInput={(params) => (
    <TextField {...params} label="Select country" variant="outlined" />
  )}
  

• 确保selectedValue的正确性
  确认你的selectedValue初始值设为巴巴多斯的code（"BB"），这样countries.find(item => item.code === selectedValue)才能正确匹配到对应的国家对象。

完整的修正后代码示例：

<Autocomplete
  id="country-select-demo"
  sx={{ width: 300 }}
  options={countries}
  value={countries.find((item) => item.code === selectedValue)}
  autoHighlight
  getOptionLabel={(option) => option.label}
  renderOption={(props, option) => (
    <li {...props}>{option.label}</li>
  )}
  renderInput={(params) => (
    <TextField {...params} label="Select country" variant="outlined" />
  )}
/>

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