Material UI Autocomplete组件multiple与onChange属性兼容问题求助

问题核心是开启multiple属性后，Autocomplete的value和onChange参数类型会发生变化：原本是单个Movie对象或null，开启多选后会变成Movie[]数组类型，你的原有state定义和回调逻辑没匹配这个变化，导致类型不兼容报错。

修改后的完整代码如下：

type Movie = {
  label: string
  year: number
}

// 补全示例电影数据（假设top100Films符合Movie类型）
const top100Films: Movie[] = [
  { label: 'The Shawshank Redemption', year: 1994 },
  { label: 'The Godfather', year: 1972 },
  { label: 'The Dark Knight', year: 2008 }
]

export default function ComboBox() {
  // 将state改为数组类型，初始值为空数组，匹配多选模式
  const [selectedMovies, setSelectedMovies] = useState<Movie[]>([])
  
  console.log({ selectedMovies });

  return (
    <Grid container padding='32px'>
      <Stack direction='row' spacing={2} divider={<Divider orientation='vertical' flexItem sx={{ width: 'auto' }} />}>
        <Autocomplete
          sx={{ width: 300 }}
          options={top100Films}
          renderInput={(params) => <TextField {...params} label='Skills' />}
          // 开启多选属性
          multiple
          // 绑定数组类型的value
          value={selectedMovies}
          // onChange的newValue现在是Movie[]类型
          onChange={(event: any, newValue: Movie[]) => setSelectedMovies(newValue)}
        />
        <Paper sx={{ width: 300, padding: '16px' }} elevation={4} >
          <Typography fontSize='20px'>选中电影名称：</Typography>
          {/* 遍历数组渲染选中项的label */}
          {selectedMovies.length === 0 ? (
            <Typography fontSize='16px'>未选择任何电影</Typography>
          ) : (
            selectedMovies.map((movie, index) => (
              <Typography key={index} fontSize='16px'>{movie.label}</Typography>
            ))
          )}
        </Paper>
        <Paper sx={{ width: 300, padding: '16px' }} elevation={4}>
          <Typography fontSize='20px'>上映年份：</Typography>
          {/* 遍历数组渲染选中项的year */}
          {selectedMovies.length === 0 ? (
            <Typography fontSize='16px'>无数据</Typography>
          ) : (
            selectedMovies.map((movie, index) => (
              <Typography key={index} fontSize='16px'>{movie.year}</Typography>
            ))
          )}
        </Paper>
      </Stack>
    </Grid>
  );
}

关键修改点：

• State类型适配：将原movie state改为selectedMovies，类型从Movie | null调整为Movie[]，初始值设为空数组，完全匹配多选模式下的value类型。
• OnChange参数更新：把newValue的类型从Movie | null改为Movie[]，确保回调函数接收的是选中项数组。
• 显示逻辑调整：因为现在是数组数据，用map遍历渲染每个选中项的信息，同时处理空数组的提示场景。
• 添加multiple属性：在Autocomplete组件中明确加入multiple属性，启用多选功能。

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