如何让两个Material UI多选Autocomplete组件互斥过滤可选选项

核心修改逻辑 #

• 两个Autocomplete组件的options属性不再直接使用完整的top100Films数组，而是基于另一组件的选中值做动态过滤，自动排除已在另一侧选中的电影
• 修复原代码中setBadMovies声明的语法错误（多余的右中括号）
• 调整重复的组件id避免DOM冲突，同时调整默认值避免两个组件初始选中同个电影导致的展示异常

const [goodMovies, setGoodMovies] = React.useState([top100Films[13]]);
const [badMovies, setBadMovies] = React.useState([]);

<div className={classes.root}>
    <Autocomplete
        multiple
        id="good-movies"
        // 过滤掉已经选入差评列表的电影
        options={top100Films.filter(film => !badMovies.some(selected => selected.title === film.title))}
        getOptionLabel={(option) => option.title}
        defaultValue={[top100Films[13]]}
        filterSelectedOptions
        renderInput={(params) => (
          <TextField
            {...params}
            variant="outlined"
            label="Good Movies"
          />
        )}
        onChange={(event, newValue) => {
            setGoodMovies(newValue)
        }}
    />

    <Autocomplete
        multiple
        id="bad-movies"
        // 过滤掉已经选入好评列表的电影
        options={top100Films.filter(film => !goodMovies.some(selected => selected.title === film.title))}
        getOptionLabel={(option) => option.title}
        defaultValue={[]}
        filterSelectedOptions
        renderInput={(params) => (
          <TextField
            {...params}
            variant="outlined"
            label="Bad Movies"
          />
        )}
        onChange={(event, newValue) => {
            setBadMovies(newValue)
        }}
    />
</div>

注意事项 #

• 如果你的电影数据存在唯一标识字段（比如id），建议把过滤逻辑中的title匹配替换为id匹配，避免重名电影导致的过滤错误
• 当前逻辑天然支持双向过滤，选中差评电影也会自动从好评可选列表中移除对应选项

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