React中点击子级加号图标匹配tagname并仅显示点击项数据的问题

架构老林

2026-7-28

解决方案

1. 修正过滤逻辑，精准匹配标识

当前仅用id过滤会出现多个数据项匹配的情况，建议结合tagName+id做双重匹配，确保只筛选出点击项对应的唯一数据：

// 点击事件处理函数，传入当前点击的子项数据
const handlePlusClick = (clickedItem) => {
  // 合并两个state数据后，同时匹配tagName和id
  const targetData = [...stateA, ...stateB].filter(
    item => item.tagName === clickedItem.tagName && item.id === clickedItem.id
  );
  // 更新详情展示的state
  setDisplayDetail(targetData);
};

2. 渲染时设置唯一key，避免重复渲染

即使过滤后数据正确，若列表项的key不唯一也会导致重复显示问题，建议用id+tagName组合作为唯一key：

{displayDetail.map(item => (
  <div key={`${item.id}-${item.tagName}`} className="detail-card">
    <h4>{item.tagName}</h4>
    <p>{item.detailContent}</p>
  </div>
))}

3. 对合并后的数据源提前去重

如果两个state本身存在重复的tagName+id组合数据，建议在过滤前先做去重处理：

// 合并并去重两个state的数据
const uniqueCombinedData = [...new Map(
  [...stateA, ...stateB].map(item => [`${item.id}-${item.tagName}`, item])
).values()];

// 再基于去重后的数据做筛选
const targetData = uniqueCombinedData.filter(
  item => item.tagName === clickedItem.tagName && item.id === clickedItem.id
);