Autocomplete多选下拉框defaultValue无法选中默认值问题排查

问题排查与修复点： #

• 受控组件模式下defaultValue无效：你给Autocomplete绑定了value={selectedNamesState}，属于受控组件，此时defaultValue会被直接忽略，必须把默认值放到useState的初始值中。
• 默认值类型不匹配：你传的defaultValue={[transformedNpaData[0].label]}是字符串数组，但组件的value是{label, value}结构的对象数组，类型不匹配导致组件无法识别选中项。
• 拼写错误导致数据获取失败：代码里stateNPAValue[formData.state.vale]存在拼写错误，应为formData.state.value，这个错误会导致无法正确获取NPA数据源，进而让transformedNpaData为空，自然选不到“All”。

修改后的代码示例： #

// 修正拼写错误，先获取有效数据源
const npaData = stateNPAValue[formData.state.value];

// 初始化state时直接设置默认选中“All”选项
const [selectedNamesState, setSelectedNamesState] = useState(
  npaData ? [transformedNpaData[0]] : []
);

const transformedNpaData = npaData.map((label, index) => ({
  label,
  value: index.toString()
}));

// 移除无效的defaultValue属性
<Autocomplete
  multiple
  id="fixed-tags-demo"
  name="Npa"
  value={selectedNamesState}
  onChange={(event, newValue) => {
    setSelectedNamesState(newValue)
    NPAHandler(newValue);
    changeHandleStateErrorRemove(event)
  }}                
  options={transformedNpaData}
  getOptionLabel={(option) => option.label.replace(/[\[\]']+/g, '')}
  renderTags={(tagValue, getTagProps) =>
    tagValue.map((option, index) => (
      <Chip
        label={option.label.replace(/[\[\]']+/g, '')}
        {...getTagProps({ index })}
      />
    ))
  }
  style={{ width: 500 }}
  renderInput={(params) => <TextField {...params} label={formData.state.value} />}
  isOptionEqualToValue={(option, value) => {
    return option.value === value.value;
  }}
/>

补充：异步数据源处理 #

如果stateNPAValue是通过API异步获取的，需要在数据加载完成后再设置默认选中状态，可添加useEffect监听：

useEffect(() => {
  const npaData = stateNPAValue[formData.state.value];
  if (npaData && transformedNpaData.length > 0) {
    setSelectedNamesState([transformedNpaData[0]]);
  }
}, [formData.state.value, stateNPAValue]);

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