reactjs 如何给予Map数组时，当数组在React中变为空时的条件？

tzxcd3kk 于 2022-12-12 发布在 React

关注(0)|答案(1)|浏览(160)

如果用户列表与以下数组中的任何ID匹配，我想将按钮更改为unfollow，否则它应该跟随按钮。
我的代码中的术语：用户：它是一个存储登录用户数据的存储器。它是一个数组，当用户跟随另一个用户时，用户id被存储在这里跟随者：它包含数据库中每个用户
这是我试过的：

{user.following?
          user?.following?.map((val, id) => {

   
            if (val === follower._id) {
             
              return <button className='button fc-button' onClick={() => { handleUnFollow(follower._id) }} key={id}>
                unfollow
              </button>
            } else {
              
              return <button className='button fc-button' onClick={() => { handleFollow(follower._id) }} key={id}>
                follow
              </button>
            }
          })
          : <button className='button fc-button' onClick={() => { handleFollow(follower._id) }} key={id}>
            follow
          </button>}

reactjs

来源：https://stackoverflow.com/questions/74762631/how-to-give-conditon-while-mapping-array-when-it-becomes-null-in-react

1条答案

按热度按时间

shyt4zoc1#

您可以使用**Array.prototype.includes（）方法来检查数组中是否存在特定的值。如果 user.following 数组不为空，则可以使用Array.prototype.map（）**来循环访问追随者数组，并为每个追随者返回相应的按钮。
下面是如何在代码中实现此功能的示例：

{user.following && user.following.map((follower, id) => {
if (user.following.includes(follower._id)) {
return <button className='button fc-button' onClick={() => { handleUnFollow(follower._id) }} key={id}>
  unfollow
</button>
} else {
return <button className='button fc-button' onClick={() => { handleFollow(follower._id) }} key={id}>
  follow
</button>
}
})}

如果user.following数组为null，则可以通过在map（）方法后添加else块来返回“follow”按钮：

{user.following && user.following.map((follower, id) => {
if (user.following.includes(follower._id)) {
return <button className='button fc-button' onClick={() => { handleUnFollow(follower._id) }} key={id}>
  unfollow
</button>
} else {
    return <button className='button fc-button' onClick={() => { 
        handleFollow(follower._id) }} key={id}>
        follow
     </button>
     }
}
else {
   return <button className='button fc-button' onClick={() => { 
     handleFollow(follower._id) }} key={id}
   }}
}

赞(0）回复(0）举报 2022-12-12

我来回答

reactjs 如何给予Map数组时，当数组在React中变为空时的条件？

1条答案

相关问题

热门标签

最新问答