如何映射具有对象数组值的对象数组答案

【问题标题】：how to map an array of objects that has values of array of objects如何映射具有对象数组值的对象数组
【发布时间】：2021-12-04 04:31:43
【问题描述】：

我有一个从我的 API 获取的 cmets 列表，看起来像这样。评论与发布喜欢或不喜欢的用户一起有喜欢和不喜欢。

const comments = [
    {
        id: 1,
        comment: "nice",
        author: "jenny",
        likes: [
            {
                id: 1,
                user: "alice"
            },
            {
                id: 2,
                user: "bob"
            }
        ],
        dislikes: [
            {
                
                id: 3,
                user: "sam"
            }
        ]
    },
    {
        id: 2,
        comment: "good job",
        author: "alice",
        likes: [
            {
                id: 2,
                user: "bob"
            }
        ],
        dislikes: [
            {
                
                id: 3,
                user: "sam"
            }
        ]
    }
]

假设 Alice 已登录。

现在用于显示 cmets 的 map 工作正常，但我想做“嵌套映射”，它循环遍历同一对象数组中的对象数组，看看喜欢或不喜欢的用户是否匹配谁已登录以显示确认信息。

我当前的代码：

const signedInUser = "alice";

return(
    Object.keys(comments).map((x, index) => {
      const com = comments[x];
  
      <div className="comment" key={index}>
        <p>{com.author}</p>
        <p>{com.comment}</p>
  
        {com.likes.map((x) => {
          {
            x.user === signedInUser ? (
              <p>You liked this</p>
            ) : (
              <button>Like</button>
            );
          }
        })}
      </div>;
    })
  );

我正在用 react 来做这件事，因为我正在尝试

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

如果存在同一用户的点赞，您应该使用some 来获得布尔响应。 map 为 like 数组中的每个对象返回响应。

return(
    Object.keys(comments).map((x, index) => {
      const com = comments[x];
  
      <div className="comment" key={index}>
        <p>{com.author}</p>
        <p>{com.comment}</p>
  
        {com.likes.some((x) => x.user === signedInUser)?
             (
              <p>You liked this</p>
            ) : (
              <button>Like</button>
            );
        }
      </div>;
    })
  );

【讨论】：

【解决方案2】：

const renderLikeOrDislikeButton = (arr, text1, ) =>{
   if(arr.some((x) => x.user === signedInUser)){
      return <p>You {text1} this</p>
   }
   return <button>{text2}</button>
}

return(
{
  Object.keys(comments).map((x, index) => {
    const com = comments[x];

    return(
      <div className="comment" key={index}>
        <p>{com.author}</p>
        <p>{com.comment}</p>
        {renderLikeOrDislikeButton(com.likes, "liked", "Like")}
        {renderLikeOrDislikeButton(com.likes, "disliked", "Dislike)}
      </div>
    )
  });

【讨论】：