React 隐藏/显示元素

问题描述

我有多个按钮，以数组对象（姓名，年龄）的形式编写。我希望只显示所点击按钮的（年龄）元素

我希望只显示所点击按钮的（年龄）元素，但它却显示了所有按钮的年龄

const App = () => {
  const [showAge, setShowAge] = useState(false);
  const people = [
    {
      name: "Jeje",
      age: 4,
    },
    {
      name: "Nene",
      age: 5,
    },
    {
      name: "Tom",
      age: 8,
    },
  ];
  return (
    <div>
        {people.map((person) => (
          <>
            <div onClick={() => setShowAge(!showAge)}>
              <p data-id={person.name}>{person.name}</p>
            </div>
            {showAge && <p className="px-3">{person.age}</p>}
          </>
        ))}
    </div>
  );
};

export default App;

解决方案

您可以将仅选择的索引存储在状态中。

const [idx, setIdx] = useState();

{people.map((person, i) => (
  <>
    <div onClick={() => setIdx(i)}>
      <p data-id={person.name}>{person.name}</p>
    </div>
    {idx === i && <p className="px-3">{person.age}</p>}
  </>
))}