React Select如何强制默认选中选项并触发renderMatches函数？

问题原因 #

• 你当前的写法属于受控组件模式，value被硬编码为seasons[0]，首先就不支持后续手动修改选中值的场景，其次onChange回调仅在用户手动交互切换选项时触发，组件初始化挂载阶段设置的默认值不会触发该回调，因此renderMatches不会自动执行。
• 如果seasons是异步获取的动态数据，初始化阶段seasons为空数组时，seasons[0]会返回undefined，也会导致组件异常。

解决方法 #

采用受控组件+useEffect的写法实现需求，代码示例如下：

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

function YourComponent() {
  // 此处替换为你实际的seasons定义/异步请求逻辑
  const seasons = [/* 你的选项配置 */];
  // 将选中值存入state，默认值设为seasons第一个选项
  const [selectedSeason, setSelectedSeason] = useState(seasons[0]);

  // 监听选中值、选项数组变化，自动触发renderMatches
  useEffect(() => {
    // 增加空判断避免数组为空时报错
    if (seasons.length) {
      renderMatches(selectedSeason);
    }
  }, [selectedSeason, seasons]);

  return (
    <Select
      onChange={(option) => {
        setSelectedSeason(option);
        renderMatches(option);
      }}
      value={selectedSeason}
      options={seasons}
    />
  )
}

注意事项 #

• 如果seasons是异步请求获取的，建议增加加载态判断，等seasons请求完成且数组不为空时再渲染Select组件，避免初始值为undefined的问题。
• 如果你不需要支持后续手动修改选中值，也可以直接在组件挂载的useEffect中调用renderMatches(seasons[0])，无需额外维护选中state。

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