点击顶部按钮时出现报错的解决方案（附CodeSandbox示例）

我刚帮你排查了这个点击顶部按钮报错的问题，根源出在Menu组件的key绑定和状态更新逻辑上，下面是具体的解决步骤：

• 修复Menu.Item的key值错误
  你代码里给Menu.Item绑定的key={item}是个对象，但React要求key必须是字符串或数字类型。每个菜单项对象里已经有key属性（比如{ key: '1', label: 'Option 1' }），所以直接改成key={item.key}就好，这样React能正确识别每个选项的唯一标识。

• 简化选中状态的处理逻辑
  结合Ant Design Menu的特性，我们可以更规范地绑定选中状态：

  <Menu
    mode="horizontal"
    selectedKeys={[this.state.current]}
    onClick={this.handleClick}
  >
    {menuItems.map(item => (
      <Menu.Item key={item.key}>{item.label}</Menu.Item>
    ))}
  </Menu>
  

  对应的点击事件函数保持简洁：

  handleClick = (e) => {
    this.setState({ current: e.key });
  };
  

• 验证修复结果
  改完这两处后，再点击顶部的菜单按钮，就不会再出现报错了，菜单的选中状态也能正常切换。

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