如何在react-select多选模式中默认显示匹配数组值的选中选项？

你的代码里存在两个关键问题：

• 在组件渲染周期里直接调用setList，会触发无限重渲染，而且完全没必要修改原始的options数组
• 错误地试图通过修改选项列表来实现选中效果，react-select的多选选中状态是通过组件的value属性来控制的

正确的实现方式如下：

1. 先从原始选项列表中筛选出需要默认选中的项，匹配规则是选项的value存在于getSelected数组中
2. 用useState维护选中状态，将初始值设为筛选出的默认选中项
3. 给Select组件绑定value和onChange属性，实现选中状态的控制

修正后的完整代码：

import React, { useState } from "react";
import "./styles.css";
import Select from "react-select";

export default function App() {
  const options = [
    {
      value: "one",
      label: "One Label"
    },
    {
      value: "two",
      label: "Two Label"
    },
    {
      value: "three",
      label: "Three Label"
    },
    {
      value: "four",
      label: "Four Label"
    }
  ];

  const getSelected = ["two", "four"];

  // 筛选出默认需要选中的选项
  const defaultSelected = options.filter(opt => getSelected.includes(opt.value));
  // 用state维护选中状态，初始值为默认选中项
  const [selectedOptions, setSelectedOptions] = useState(defaultSelected);

  return (
    <div className="App">
      <Select 
        options={options} 
        isMulti 
        value={selectedOptions}
        onChange={setSelectedOptions}
      />
    </div>
  );
}

关键说明：

• defaultSelected通过filter和includes匹配出符合条件的选项对象，因为react-select的value需要接收完整的选项对象数组，而不是单纯的value字符串数组
• 绑定onChange事件来更新选中状态，确保用户后续的选择操作能正常生效

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