组件中无法遍历含数字键的按钮对象并输出按钮的问题求助

问题原因 #

1. 你拿到的是带额外属性的类数组对象：对象里既有数字索引（0、1）对应的按钮项，还有独立的isActive属性，直接把整个对象当成单个按钮去访问button.key、button.text是完全错误的。
2. 没有做遍历操作：当前代码只是判断了整个对象的isActive，完全没处理对象里的多个按钮条目，自然渲染不出多个按钮。

解决步骤 #

1. 提取对象中的按钮条目 #

先从原对象里筛选出真正的按钮项（排除非数字索引的属性，比如isActive）：

// 假设原按钮对象叫buttonData
const buttonItems = [];
for (const key in buttonData) {
  // 只保留数字类型的键对应的条目
  if (!isNaN(Number(key))) {
    buttonItems.push(buttonData[key]);
  }
}

// 或者更简洁的写法：
const buttonItems = Object.values(buttonData).filter(item => item.key && item.text);

2. 遍历渲染按钮 #

在JSX中通过map遍历提取出的按钮数组，同时可以利用每个按钮自身的isActive做样式区分：

<div className="flex">
  {buttonItems.map(btn => (
    <button 
      key={btn.key}
      // 根据按钮自身的激活状态添加类名
      className={btn.isActive ? 'active-button' : ''}
    >
      <div>
        <div>{btn.text}</div>
      </div>
    </button>
  ))}
</div>

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