React中如何将JSON的唯一description值映射为独立按钮？

1. 修正父组件的渲染逻辑 #

你当前的map写法存在两处错误：

• 解构({item})不匹配数据结构：uniqueDescription是字符串数组，每个元素就是单个描述值，不是带item属性的对象
• 给TypeButtons传递了整个数组，导致每个按钮都拿到全部描述值

修改后的渲染代码：

<div className="hidden lg:inline-flex mb-1 px-2">
  {/* 遍历唯一描述数组，传递单个值给组件 */}
  {uniqueDescription?.map((desc) => (
    <TypeButtons
      key={desc} // 利用唯一的描述值作为key，避免React警告
      description={desc} 
    />
  ))}
</div>

2. 调整TypeButtons组件逻辑 #

组件需要接收单个描述值而非整个数组，同时修正按钮显示内容：

function TypeButtons({ description }) {
  return (
    <div className="hidden lg:inline-flex mb-1 px-9">     
      <button      
        className="button"
        onClick={() => { /* 替换为你的实际点击逻辑 */ }}
      >
        {description}
      </button>        
    </div>
  )
}
export default TypeButtons

问题根源总结 #

之前每个按钮都显示全部值，是因为父组件循环时把整个描述数组传给了每个TypeButtons组件，同时map的解构错误导致你没正确获取单个描述值，最终每个按钮都渲染了整个数组内容。

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