Блог

У меня есть список комментариев, которые я получаю из своего API, выглядит примерно так. Комментарий имеет лайки и антипатии наряду с пользователем, который разместил лайк или антипатию.

 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"
            }
        ]
    }
]
 

Допустим, Алиса вошла в систему.

Теперь 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, так как пытаюсь

Предполагается, что вы используете 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>;
    })
  );
 

 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>
    )
  });