React-select设置defaultValue后无法显示选中值如何解决

核心错误点 #

• 受控/非受控属性混用：react-select只要传入value属性就会进入受控模式，此时defaultValue会直接失效，选中态完全由传入的value决定。你的代码里两个属性同时传入，defaultValue根本不会被组件读取。
• 类型不匹配：你定义的options列表中，所有选项的value和label都是字符串类型（例如8对应的是{value: "8", label: "8"}），但传入的defaultValue用的是数字类型8，JS严格相等判断下8 === "8"返回false，哪怕在非受控模式下也无法匹配到对应选项。
• value传值格式错误：单选场景下react-select要求value传入单个选项对象，但你用options.filter()做匹配，filter返回的是数组，属于不规范传参，存在兼容风险。

修复方案 #

按照要求不修改useState("0")的初始state，只需要调整value属性的计算逻辑，删掉无效的defaultValue即可，修正后的完整代码如下：

import React, { useState } from "react";
import Select from "react-select";

export default function App() {
  const [selectedOption, setSelectedOption] = useState("0");
  const options = [
    { value: "0", label: "0" },
    { value: "1", label: "1" },
    { value: "2", label: "2" },
    { value: "3", label: "3" },
    { value: "4", label: "4" },
    { value: "5", label: "5" },
    { value: "6", label: "6" },
    { value: "7", label: "7" },
    { value: "8", label: "8" },
    { value: "9", label: "9" },
    { value: "10", label: "10" },
    { value: "11", label: "11" },
    { value: "12", label: "12" }
  ];
  const handleTypeSelect = (e) => {
    setSelectedOption(e.value);
  };

  return (
    <div>
      <Select
        options={options}
        onChange={handleTypeSelect}        
        // 首次渲染state为初始值"0"时，兜底匹配值为"8"的选项，用户操作后正常匹配选中值
        value={options.find(option => {
          const matchValue = selectedOption === "0" ? "8" : selectedOption;
          return option.value === matchValue;
        })}
        label="Single select"
      />
    </div>
  );
}

修复说明 #

• 移除了受控模式下无效的defaultValue属性，完全通过value控制选中态，符合React受控组件的使用规范
• 用Array.find替代Array.filter做选项匹配，单选场景直接返回单个选项对象，符合组件参数要求
• 首次渲染时增加逻辑兜底，不需要修改state初始值即可默认选中8选项，用户手动选择后会正常切换到对应选中项
• 所有匹配逻辑使用字符串类型做判断，和options里的字段类型保持一致，避免类型不一致导致的匹配失败问题

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