React Select开启isMulti后选中选项后无法显示其余选项问题

问题出在你定义的选项格式上：react-select 的选项对象必须包含value属性来作为选项的唯一标识，而你目前用的是key属性，这会导致组件无法正确区分选项，进而在选中一个后错误地过滤掉其他选项。

你只需要把选项映射时的key替换成value即可，修改后的代码如下：

export const DropDown = ({ itemsOption, placeholder }) => {
  const [options, setOptions] = useState([]);

  const loadOptions = (op) => {
    api.get(`${op}`).then(({ data }) => {
      setOptions(
        data.map((item) => {
          return {
            value: item.code, // 这里把key改成value
            label: item.name_ptbr,
            // 如果需要保留React列表渲染的key，可以额外加上，但不是必须的
            // key: item.code
          };
        })
      );
    });
  };

  useEffect(() => {
    loadOptions(itemsOption);
  }, []);

  return (
    <>
      <DropStyled>
        <Select
          isMulti
          options={options}
          name={placeholder}
          placeholder={placeholder}
          closeMenuOnSelect={false}
        />
      </DropStyled>
    </>
  );
};

补充说明 #

• react-select 内部依靠value属性来追踪选中状态和区分不同选项，key只是React用于列表渲染优化的属性，和组件的选项逻辑无关。
• 确保value的值是唯一的（比如你用的item.code），这样组件才能正确识别每个选项，避免选中后出现异常。

内容的提问来源于stack exchange，提问作者Dênis