React数组映射遇空值的条件判断：实现关注/取消关注按钮切换

需求说明 #

当目标用户（follower）的ID存在于当前登录用户（user）的following数组中时，按钮显示“unfollow”；否则显示“follow”。

原代码问题分析 #

你当前的代码通过map遍历user.following数组，会为数组里的每一个元素生成一个按钮，这显然不符合需求——我们只需要针对当前follower显示一个按钮即可，不需要循环渲染多个。

修正后的代码 #

{/* 先判断user及user.following是否存在，避免空值报错 */}
{user?.following ? (
  user.following.includes(follower._id) ? (
    <button 
      className='button fc-button' 
      onClick={() => handleUnFollow(follower._id)}
      key={follower._id}
    >
      unfollow
    </button>
  ) : (
    <button 
      className='button fc-button' 
      onClick={() => handleFollow(follower._id)}
      key={follower._id}
    >
      follow
    </button>
  )
) : (
  <button 
    className='button fc-button' 
    onClick={() => handleFollow(follower._id)}
    key={follower._id}
  >
    follow
  </button>
)}

代码说明 #

1. 使用user?.following进行可选链判断，避免user为null/undefined时的报错
2. 通过数组的includes()方法直接判断follower._id是否在user.following数组中，替代不必要的循环
3. 用follower._id作为按钮的key，保证每个用户对应的按钮key唯一，符合React的key规范

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