React多下拉框组件中实现未选选项展示时选中值重置问题解决

嘿，我看你这代码的问题主要出在状态管理和下拉框选项渲染的逻辑没对齐，导致一过滤选项，之前的选中值就被重置了。咱们来一步步把这个问题解决掉：

先说说你代码里的核心问题 #

1. 状态冗余且不一致：你同时用了selectedItemList和item两个状态跟踪选中项，很容易出现状态不同步的情况，这也是选中值被重置的根源之一。
2. 选项渲染逻辑错位：你明明过滤出了newOptionsList，但渲染下拉框选项时还是用了原始的optionsList，等于白做了过滤；而且已选中的下拉框没有单独处理选项，一旦该选项被其他下拉框选中，当前下拉框的value就不在选项列表里了，自然会被重置为空。
3. useCallback依赖不全：缺少selectedItemList、item这些关键状态，导致组件更新时下拉框不会重新渲染正确的选项。

修正后的完整代码 #

import { useState, useCallback } from 'react';

const AddDropDown = () => {
  // 用一个数组状态管理所有下拉框的选中值，索引对应下拉框序号
  const [selectedItems, setSelectedItems] = useState([]);
  const optionsList = ['item1', 'item2'];

  // 辅助函数：获取所有已被选中的选项
  const getSelectedOptions = () => {
    return selectedItems.filter(item => item !== undefined && item !== null);
  };

  const renderDropdown = useCallback(() => {
    const selectedOptions = getSelectedOptions();
    
    return selectedItems.map((selectedValue, index) => {
      // 针对每个下拉框分情况处理可选选项
      let availableOptions;
      if (selectedValue) {
        // 已选中值的下拉框：只保留自己的选中值（确保能显示原选中内容，同时禁用）
        availableOptions = [selectedValue];
      } else {
        // 空下拉框：只显示未被其他下拉框选中的选项
        availableOptions = optionsList.filter(option => !selectedOptions.includes(option));
      }

      return (
        <div key={index} style={{ margin: '10px 0' }}>
          <label>下拉框 {index + 1}</label>
          <select
            value={selectedValue || ''}
            onChange={(e) => {
              const newValue = e.target.value;
              // 用函数式更新确保拿到最新状态
              setSelectedItems(prev => {
                const newItems = [...prev];
                newItems[index] = newValue;
                return newItems;
              });
            }}
            disabled={!!selectedValue}
            style={{ marginLeft: '10px' }}
          >
            {/* 空下拉框显示默认提示选项 */}
            {!selectedValue && <option value="">请选择</option>}
            {availableOptions.map((option) => (
              <option key={option} value={option}>
                {option}
              </option>
            ))}
          </select>
        </div>
      );
    });
  }, [selectedItems]);

  return (
    <div style={{ padding: '20px' }}>
      {renderDropdown()}
      {/* 只有还有未选中的选项时，才显示添加按钮 */}
      {getSelectedOptions().length < optionsList.length && (
        <button onClick={() => setSelectedItems(prev => [...prev, undefined])}>
          添加新下拉框
        </button>
      )}
    </div>
  );
};

export default AddDropDown;

关键改动说明 #

1. 合并状态管理：把原来的三个状态整合成一个selectedItems数组，每个元素对应一个下拉框的选中值，彻底避免状态不一致的问题。
2. 分场景渲染选项：
   • 已选中值的下拉框：只保留自身的选中值作为选项，确保即使该选项被其他下拉框选中，当前下拉框依然能显示原选中内容，同时设置disabled禁用。
   • 空下拉框：只渲染未被其他下拉框选中的选项，还加了空提示选项提升用户体验。
3. 函数式更新状态：更新selectedItems时用函数式更新，确保拿到最新的状态快照，避免闭包导致的状态滞后问题。
4. 智能控制添加按钮：当所有选项都被选中后，自动隐藏添加按钮，避免创建无选项可选的下拉框。

这样修改后，新添加的下拉框只会显示未被选中的选项，而已选中的下拉框会稳定保留自己的选中值并禁用，完全解决了你遇到的问题。

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