React中无法按tagname分组blogdetails问题求助

核心问题分析 #

1. 分组逻辑错误：当前reduce分组时，仅将tag.tagname字符串存入数组，丢失了完整的博客详情数据，导致后续无法获取blogdetails。
2. 渲染逻辑不匹配：遍历分组数据时，错误地尝试从字符串类型的data中读取blogdetails，自然无法展示内容。

修复步骤 #

1. 修正分组逻辑

将分组时存储的内容改为完整的tag对象，保留blogdetails数据：

const tags = filterTags.reduce((tags, tag) => {
  if (!tags[tag.tagname]) tags[tag.tagname] = [];
  tags[tag.tagname].push(tag); // 替换原tag.tagname为tag对象
  return tags;
}, {});

2. 调整渲染逻辑，匹配正确的数据结构

遍历分组后的对象时，直接从tag对象中取出blogdetails：

{Object.entries(tags).map(([tagname, blogItems]) => (
  <div key={tagname} className="blogdata">
    {blogItems.map((item) => (
      <span key={item.id} className="data-1">
        {item.blogdetails}
      </span>
    ))}
  </div>
))}

3. 优化点击交互（匹配“点击单个Tag加号展示对应详情”需求）

如果需要点击某个Tag的加号仅展示该Tag下的内容，而非所有分组：

• 修改状态存储：

// 替换原isShownFullDetails，改为存储当前激活的tagname
const [activeTag, setActiveTag] = useState(null);

// 更新点击事件逻辑
const showFullDetails = (tagname) => {
  setActiveTag(activeTag === tagname ? null : tagname);
};

• 更新JSX渲染：

<div key={id} className='row'>
  <div className='groupByTagInfo'>
    <input onClick={() => showFullDetails(tagname)} style={style} type="button" value="+"></input>
  </div>
  {activeTag === tagname && (
    <div className='groupByTagRecord'>
      <div className="blogdata">
        {tags[tagname].map((item) => (
          <span key={item.id} className="data-1">
            {item.blogdetails}
          </span>
        ))}
      </div>
    </div>
  )}
  <div className="groupByTagInfo">
    <span className="groupByTagCount">{count}</span>
  </div>
  <div className="groupByTagInfo">
    <span className="groupByTagName">{tagname}</span>
  </div>
</div>

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