React自定义Dropdown组件handleChange无法返回选中项的解决方案

代码无法正确返回选中对象的核心原因有3个：

• 原生HTML <select> 的 <option> 标签value属性仅支持字符串/数字这类基础类型，直接把对象绑定到value上时，浏览器会自动调用对象的toString()方法，最终拿到的值是"[object Object]"，完全无法对应原始列表项
• 组件内部冗余维护了selected状态，没有和父组件传入的value prop做同步，会出现内外状态不一致的问题
• 直接用props.children接收列表数组没有做类型校验，当传入内容不是数组时会导致map执行报错

核心思路是给每个option绑定可唯一匹配的基础类型值（比如列表索引、项的唯一id），选中时根据这个值从原始列表里取出完整对象再回传父组件：

import { useState, useEffect } from 'react';

const DropDownList = (props) => {
  const list = Array.isArray(props.children) ? props.children : [];
  // 存选中项的索引，基础类型可直接被select元素识别
  const [selectedIndex, setSelectedIndex] = useState(0);

  // 同步父组件传入的value，匹配对应索引
  useEffect(() => {
    if (!props.value) return;
    const targetIndex = list.findIndex(item => item.label === props.value.label);
    setSelectedIndex(targetIndex >= 0 ? targetIndex : 0);
  }, [props.value, list]);

  const handleChange = (e) => {
    const currentIndex = Number(e.target.value);
    const selectedItem = list[currentIndex];
    setSelectedIndex(currentIndex);
    // 回传完整的对象给父组件
    props.setValue?.(selectedItem);
  };

  return (
    <div className="col-sm-6">
      <div className="form-group">
        {props.title ? <label>{props.title}</label> : null}
        <select 
          className="form-control" 
          value={selectedIndex} 
          onChange={handleChange}
        >
          {list.map((item, index) => (
            <option key={index} value={index}>
              {item.label}
            </option>
          ))}
        </select>
      </div>
    </div>
  )
}

原有父组件代码不需要调整，可直接使用：

const clima = [
  { label: 'Ensolarado', icon: 'ensolarado' },
  { label: 'Nublado', icon: 'nublado' },
  { label: 'Garoa', icon: 'garoa' },
  { label: 'Chuva Forte', icon: 'chuva_forte' },
];
const [clima_manha, setClima_Manha] = useState(clima[0]);

<DropDownList 
  value={clima_manha} 
  setValue={setClima_Manha} 
  title="Manhã"
>
  {clima}
</DropDownList>

• 如果你的列表项有全局唯一的字段（比如id），优先用这个字段代替索引作为option的value，避免列表动态排序/增删时出现选中项错位
• 如果不需要组件自己控制状态，可以完全移除内部的selectedIndex状态，直接通过props.value计算当前选中索引，做成纯受控组件，减少状态同步问题
• 可以增加空列表兜底逻辑，当list为空时渲染禁用的提示选项，提升交互体验

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