React中Dropdown点击事件参数为undefined的问题排查

核心问题分析 #

你遇到的问题来自三个关键点：

• 循环变量作用域的闭包陷阱：用var声明循环变量x，它属于函数级作用域，循环结束后x的值会固定为props.storedSections.length，此时props.storedSections[x]超出数组索引范围，点击时自然传入undefined。
• 状态更新函数调用错误：你写了setSections[newSectionList]，但setSections是React的状态更新函数，必须通过setSections(newSectionList)的方式调用。
• 状态存储方式不合理：直接把<Dropdown.Item>这类JSX元素存在sections状态里，导致sections.indexOf(props.storedSections[x])永远返回-1（一个是React元素，一个是字符串，无法匹配），会重复添加选项，也不符合React状态管理的最佳实践。

分步修复 #

1. 修正循环变量作用域

把循环里的var x改成let x，let是块级作用域，每次循环都会创建独立的x变量，确保点击时能获取到当前循环的正确索引：

for(let x = 0; x < props.storedSections.length; x++){
  if(sections.indexOf(props.storedSections[x]) == -1)
  newSectionList.push(<Dropdown.Item onClick={()=>handleSectionClick(props.storedSections[x])}>{props.storedSections[x]}</Dropdown.Item>)
}

2. 修复状态更新函数调用

将错误的setSections[newSectionList]改为正确的函数调用：

setSections(newSectionList)

3. 优化状态管理（推荐方案）

更合理的做法是状态只存纯数据，渲染时动态生成JSX，这样状态更易维护，也能避免元素比对的问题：

• 修改sections的初始状态为字符串数组：

const [sections, setSections] = useState(["Work"])

• 调整useEffect逻辑，只处理数据：

useEffect(() => {
  // 移除原有的"Add New"选项
  const existingSections = sections.filter(item => item !== "Add New");
  // 合并新数据并去重
  const uniqueSections = [...new Set([...existingSections, ...props.storedSections])];
  // 重新添加"Add New"
  const newSectionList = [...uniqueSections, "Add New"];
  setSections(newSectionList);
}, [props.storedSections]) // 添加依赖，父组件storedSections更新时同步更新下拉项

• 渲染下拉菜单时动态生成JSX：

<Dropdown>
  {sections.map(section => (
    <Dropdown.Item 
      key={section} 
      onClick={() => handleSectionClick(section)}
    >
      {section}
    </Dropdown.Item>
  ))}
</Dropdown>

验证效果 #

修改完成后，点击任何下拉项时handleSectionClick都能收到正确的字符串值，无论是默认的"Work"、父组件传入的"test1"/"test2"还是"Add New"，都能正常触发对应的逻辑。后续接入数据库时，只需要更新storedSections状态即可，渲染逻辑无需改动。

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