react-select多选场景下如何同步更新useState数组状态

问题根因 #

• 开启isMulti多选属性后，react-select的onChange回调返回的参数不是单个选中项对象，而是当前所有已选中选项组成的数组，你之前直接对数组取e.label，拿到的是undefined，自然会触发报错。
• 你原本的追加逻辑不符合多选组件的交互逻辑：手动追加只能新增元素，无法处理用户取消选中时删除元素的需求，完全没有必要自己做增删判断。

正确实现 #

react-select已经自动帮你维护了当前全量的选中列表，直接对返回的选中数组做处理即可，修正后的代码如下：

import { useState } from 'react';
import Select from 'react-select';

const teams = [
  { label: "Arsenal", value: 42 },
  { label: "Aston Villa", value: 66 },
  { label: "Brentford", value: 55 }
];

function TeamSelect() {
  // 如果你只需要存选中项的label
  const [comparedTeams, setComparedTeams] = useState([]);

  return (
    <div style={{ marginTop: "10px" }}>
      <Select
        isMulti
        name="select-teams"
        options={teams}
        className="basic-multi-select"
        classNamePrefix="select"
        onChange={(selectedOptions) => {
          // 加兜底：部分版本react-select在全部取消选中时会返回null
          const currentSelected = selectedOptions || [];
          // 提取所有选中项的label更新状态，选中、取消选中都会自动同步
          setComparedTeams(currentSelected.map(item => item.label));
        }}
      />
    </div>
  );
}

如果你需要存完整的选中项对象（包含label和value），直接把onChange里的逻辑改成setComparedTeams(selectedOptions || [])即可。

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