React中如何嵌套map处理含子对象数组的结构，判断用户点赞/踩状态

原有代码的核心问题 #

• 数组遍历方式错误：comments本身就是数组，不需要调用Object.keys()再取值，直接调用数组map方法即可
• 外层map回调没有返回JSX元素，导致渲染无内容
• 点赞状态判断逻辑错误：直接遍历likes数组会导致每一个点赞用户对应渲染一条提示/按钮，正确做法是先判断当前登录用户是否存在于点赞/点踩数组中，再对应渲染内容
• 缺少点踩状态的判断逻辑，不符合需求

正确实现代码 #

const signedInUser = "alice";

return (
  comments.map((com) => {
    // 提前判断当前用户的点赞、点踩状态
    const hasLiked = com.likes.some(item => item.user === signedInUser);
    const hasDisliked = com.dislikes.some(item => item.user === signedInUser);

    return (
      <div className="comment" key={com.id}>
        <p>作者：{com.author}</p>
        <p>评论内容：{com.comment}</p>
        
        {/* 点赞区域 */}
        {hasLiked ? (
          <p>You liked this</p>
        ) : (
          <button>Like</button>
        )}

        {/* 点踩区域 */}
        {hasDisliked ? (
          <p>You disliked this</p>
        ) : (
          <button>Dislike</button>
        )}
      </div>
    )
  })
)

实现说明 #

• 使用数组some方法判断用户是否在对应操作数组中，返回布尔值直接用来做条件渲染，避免嵌套map导致的多元素重复渲染问题
• 列表key直接使用评论本身的id，比数组下标更稳定，避免列表重排时的渲染异常
• 提前计算状态变量，JSX结构更清晰易读

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