如何在 React 列表中仅针对点击项显示对应按钮

正确做法是将状态从布尔值升级为可标识具体项的值，最简单高效的方式是存储被点击项的索引（index）。这样，每个列表项都能基于自身索引与状态比对，决定是否渲染按钮。

以下是优化后的完整实现：

import React, { useState } from 'react';

export function App(props) {
  // ✅ 状态初始化为 undefined（或 -1），表示无项被选中
  const [activeIndex, setActiveIndex] = useState();

  const current = [
    { name: 'yaba1', age: 20 },
    { name: 'yaba2', age: 23 }
  ];

  const handleClick = (index) => {
    // ✅ 仅更新为当前点击项的索引
    setActiveIndex(index);
  };

  return (
    
      {current.map((item, index) => (
        
          {/* ✅ 绑定 index 并传递给点击处理器 */}
           handleClick(index)}
          >
       
     
              @@##@@
            
            
              {item.name}
            
          
          {/* ✅ 仅当当前索引匹配 activeIndex 时才渲染按钮 */}
          {activeIndex === index && (