React中如何实现点击按钮仅显示对应元素的age值？

你的问题在于用了一个全局布尔状态showAge，所有按钮点击都会切换这个状态，导致所有年龄同时显示/隐藏。要实现点击单个按钮只显示对应年龄，需要把状态改成存储当前要显示年龄的人员标识（比如姓名），而非简单的布尔值。

修改后的代码如下：

const App = () => {
  // 初始值设为null，表示没有要显示的年龄
  const [showAgeFor, setShowAgeFor] = useState(null);
  const people = [
    {
      name: "Jeje",
      age: 4,
    },
    {
      name: "Nene",
      age: 5,
    },
    {
      name: "Tom",
      age: 8,
    },
  ];
  return (
    <div>
        {people.map((person) => (
          // 给每个列表元素添加唯一key，符合React渲染规范
          <div key={person.name}>
            <div onClick={() => {
              // 点击时切换：若当前已显示该人员年龄则隐藏，否则显示
              setShowAgeFor(showAgeFor === person.name ? null : person.name);
            }}>
              <p data-id={person.name}>{person.name}</p>
            </div>
            // 仅当状态匹配当前人员姓名时，才渲染年龄
            {showAgeFor === person.name && <p className="px-3">{person.age}</p>}
          </div>
        ))}
    </div>
  );
};

export default App;

核心修改说明： #

• 将全局布尔状态showAge替换为showAgeFor，存储目标人员的姓名，初始值为null
• 点击逻辑改为：判断当前状态是否为当前人员姓名，以此切换显示/隐藏状态
• 显示条件精准匹配当前人员的姓名，确保只有被点击的人员年龄会展示
• 为列表项添加唯一key属性，避免React渲染警告

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