React点击按钮仅展示对应单条JSON数据记录的实现问题

你的问题根源在于用了一个全局的布尔状态visible控制所有条目的显示/隐藏，点击任意按钮都会触发所有条目同步变化。要实现点击对应按钮只展示当前条目的title，需要把状态改成跟踪当前激活的条目ID，而非单个布尔值。

修改后的实现代码： #

// 将状态从单个布尔值改为存储激活的ID，初始值设为null表示无条目激活
const [activeId, setActiveId] = React.useState(null);

return (
  <tbody> 
    {currentTableData.map(item => (
      // map循环必须添加唯一key，用item.id作为key是React最佳实践
      <div key={item.id}>
        <button 
          onClick={() => {
            // 点击时判断：若当前激活的是该条目ID则取消激活，否则激活该条目
            setActiveId(prevId => prevId === item.id ? null : item.id);
          }}
        >
          {/* 根据当前条目是否激活切换按钮文字 */}
          {activeId === item.id ? 'Hide' : 'Show'}
        </button>
        {/* 仅当当前条目ID等于激活ID时，渲染对应的title */}
        {activeId === item.id && <div>{item.title}</div>}
      </div>
    ))}
  </tbody>
)

关键改动说明： #

• 状态类型调整：把visible（布尔值）换成activeId（存储ID或null），精准定位需要显示的单条记录。
• 点击逻辑优化：通过比对激活ID与当前条目ID，控制单条目的显示/隐藏，避免全局触发所有条目状态变化。
• 渲染条件修改：仅在activeId匹配当前条目ID时渲染title，实现单条独立控制。
• 添加key属性：map渲染列表时添加唯一key，符合React性能优化要求。

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