React组件中嵌套map判断博客点赞状态出现异常结果的问题

API 探路者

2026-8-23

问题解决思路

你的问题出在嵌套使用两层map：每遍历一篇博客，又会遍历一遍所有点赞博客，导致每篇博客会生成和点赞博客数量相同的结果（比如第一篇博客会和2篇点赞博客各比对一次，输出两次“NOT liked”），这就是重复内容的来源。

另外还要注意，React类组件里不能直接在类体中用const定义变量，这是语法错误，得改成类属性或者放到render函数里。

修正后的代码

class Blogs extends React.Component {
  // 定义类属性存储博客数据
  all_blogs = [
    {"blog_title" : "First Blog"},
    {"blog_title" : "Second Blog"},
    {"blog_title" : "Third Blog"},
    {"blog_title" : "Fourth Blog"},
    {"blog_title" : "Fifth Blog"},
  ];

  liked_blogs = [
    {"blog_title" : "Second Blog"},
    {"blog_title" : "Third Blog"},
  ];

  render() {
    // 提前提取所有点赞博客的标题，优化判断效率
    const likedBlogTitles = this.liked_blogs.map(blog => blog.blog_title);
    
    return (
      <div>
        {this.all_blogs.map((blog, index) => {
          // 判断当前博客是否在点赞列表中
          const isLiked = likedBlogTitles.includes(blog.blog_title);
          // 必须给列表元素加key，避免React警告
          return (
            <div key={index}>
              {isLiked ? "This blog is liked" : "This blog is NOT liked"}
            </div>
          );
        })}
      </div>
    );
  }
}