React列表按钮点击时仅展示对应项的实现方法咨询

你当前的问题在于用了一个全局的布尔状态seeItem，所有按钮点击都会切换这个状态，导致所有列表项同时显示或隐藏。要实现点击按钮只展示对应项，需要把状态改成跟踪被点击项的ID，具体修改如下：

修改后的代码 #

import './App.css';
import { useState } from "react";

const list_of_items = [{id:1, text:"lorem ipsum 1"}, {id:2, text:"lorem ipsum 2"}, {id:3, text: "lorem ipsum 3"}]

function App() {
  // 初始状态设为null，表示没有选中任何项
  const [activeItemId, setActiveItemId] = useState(null);
  
  // 点击时传入当前项的id，更新状态
  function clickHandler(itemId) { 
    // 如果点击的是当前已选中的项，就取消选中；否则选中该项
    setActiveItemId(prevId => prevId === itemId ? null : itemId);
  }

  return (
    <>
      <h1>Im going to test clicks to list of items</h1>
      {list_of_items.map((item) => {
        // 用item.id作为key，比index更可靠
        return (
          <div key={item.id} style={{ margin: 70 }}>
            {/* 只有当前项的id等于activeItemId时才显示内容 */}
            { activeItemId === item.id && JSON.stringify(item)}
            {/* 点击按钮时传入当前项的id */}
            <button style={{display:"block"}} onClick={() => clickHandler(item.id)}>Which item clicked?</button>
          </div>
        );
      })}
    </>
  );
}

export default App;

关键修改点 #

• 状态从seeItem（布尔值）改成activeItemId（存储选中项的id，初始为null）
• 点击事件处理函数clickHandler现在接收当前项的id，通过判断来切换选中状态
• 渲染时通过activeItemId === item.id来判断是否显示当前项的内容
• 把列表项的key从index改成item.id，避免列表项顺序变化时出现渲染问题

内容的提问来源于stack exchange，提问作者Δημήτρης Τσιδοδήμος