如何在react-select级联菜单中展示最后可用选项替代无选项提示

问题原因 #

你当前实现的核心问题是：选中最终层级的无子项选项时，没有保留最后一级的选项列表，更新状态时未保留options值，导致再次打开菜单时没有可渲染的选项，触发默认无选项提示。同时你代码里的menuIsOpen属性拼写有误（你写的是menuisOpen，i未大写），会导致菜单受控逻辑失效。

调整方案 #

按以下修改即可实现需求：

import React, { useState } from 'react';
import Select, { components } from 'react-select';
// 替换为你自己的原始多级选项数据
const options = [/* 你的原始选项配置 */];

function SingleSelect() {
  const [selectOptions, setSelectOptions] = useState({
    isMenuOpen: false,
    closeMenuOnSelect: false,
    renderValue: false,
    options: options,
    // 新增字段缓存最后一级的选项列表
    lastLevelOptions: options
  });

  function handleOptionClick(e, props) {
    e.stopPropagation();
    e.preventDefault();

    const nestedGroup = props.data.sub_items;

    if (nestedGroup) {
      setSelectOptions({
        ...selectOptions,
        options: nestedGroup,
        // 有子项时同步更新最后一级缓存
        lastLevelOptions: nestedGroup,
        closeMenuOnSelect: false,
        renderValue: false,
        isMenuOpen: true
      });
    }

    if (!nestedGroup) {
      setSelectOptions({
        ...selectOptions,
        // 选中最终项时不修改options，保留最后一级列表
        closeMenuOnSelect: true,
        renderValue: true,
        isMenuOpen: false
      });
    }
  }

  // 新增菜单打开回调，每次打开直接展示缓存的最后一级选项
  const handleMenuOpen = () => {
    setSelectOptions(prev => ({
      ...prev,
      options: prev.lastLevelOptions,
      isMenuOpen: true
    }))
  }

  function Option(props) {
    return (
      <div onClick={(e) => handleOptionClick(e, props)}>
        <components.Option {...props} isSelected={false} />
      </div>
    );
  }

  return (
    <Select
      name="options"
      classNamePrefix
      components={{ Option }}
      closeMenuOnSelect={selectOptions.closeMenuOnSelect}
      // 修正menuIsOpen拼写错误，原代码i未大写
      menuIsOpen={selectOptions.isMenuOpen}
      controlShouldRenderValue={selectOptions.renderValue}
      isSearchable={false}
      options={selectOptions.options}
      onMenuOpen={handleMenuOpen}
    />
  );
}

关键修改说明 #

• 新增lastLevelOptions状态专门存储最后一级的选项列表，避免选中最终项后列表丢失
• 选中有子项的层级时，同步把当前子项列表存入缓存
• 选中最终项时仅修改菜单关闭和值渲染的开关，不覆盖options值
• 新增onMenuOpen回调，确保每次打开菜单时都读取缓存的最后一级列表展示
• 修正menuIsOpen的拼写错误，保证受控逻辑正常运行

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