如何基于第一个React Select的选中值动态修改第二个Select的options属性

现有代码问题 #

• 第二个Select的options属性直接传入了函数引用，而非函数执行后的选项数组，会导致选项不生效
• 缺少第一个选择框清空时，自动清空第二个选择框已选值的逻辑，容易出现选项和选中值不匹配的异常
• 选项匹配逻辑如果后续扩展多分类的话，硬编码if判断维护性差，建议用映射表替代

最优实现方案 #

优先用useMemo缓存二级选项，避免组件每次重渲染都重复计算选项，性能更好，逻辑也更清晰。

步骤1：改造二级选项计算逻辑，用映射表+useMemo缓存 #

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

// 提前定义一级分类和二级选项的映射关系，后续加分类直接修改这个对象即可
const categoryOptionsMap = {
  'Health Care': options1,
  // 后续新增分类直接在这里加键值对即可，无需修改核心逻辑
  'Education': options3,
  'Finance': options4
}

function YourComponent() {
  const [selectValue, setSelectValue] = useState('');
  const [secondSelectValue, setSecondSelectValue] = useState(null); // 存储第二个选择框的选中值

  // 用useMemo缓存二级选项，只有selectValue变化的时候才重新计算
  const secondaryOptions = useMemo(() => {
    // 一级分类未选时返回空数组
    if (!selectValue) return [];
    // 从映射表取对应选项，无匹配时返回默认值
    return categoryOptionsMap[selectValue] || options2;
  }, [selectValue]); // 依赖项仅为一级选择框的值

步骤2：修改第一个选择框的onChange逻辑，清空时同步重置二级选择框 #

<Select
  styles={colourStyles}
  className="basic-single"
  classNamePrefix="select"
  isClearable={isClearable}
  isSearchable={isSearchable}
  placeholder="Select service category"
  name="primaryCategory"
  options={serviceCategoriesPrimary}
  onChange={(value) => {
    if (value !== null) {
      setSelectValue(value.value);
    } else {
      setSelectValue("");
      setSecondSelectValue(null); // 一级清空时同步清空二级选中值，避免数据异常
    }
  }}
/>

步骤3：修改第二个选择框配置，直接传入缓存好的二级选项 #

<Select
  styles={colourStyles}
  className="basic-single"
  classNamePrefix="select"
  isClearable={isClearable}
  isSearchable={isSearchable}
  isDisabled={!selectValue} // 简化判断逻辑，空字符串本身为假值
  placeholder="Select secondary category"
  name="secondaryCategory"
  value={secondSelectValue}
  onChange={setSecondSelectValue}
  options={secondaryOptions} // 直接传入缓存好的选项数组即可
/>

方案优势 #

• 性能更优：useMemo会缓存二级选项，只有一级选择值变化时才重新计算，避免不必要的重复执行
• 维护性好：分类映射表单独定义，后续新增分类不需要修改计算逻辑，直接加映射关系即可
• 逻辑严谨：增加了一级清空时同步重置二级的逻辑，不会出现选项和选中值不匹配的异常
• 代码更简洁：简化了无用的函数调用和冗余判断

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