React组件中使用.map()设置status prop时状态显示异常问题

你的问题根源在于status属性用了onlineFriends.map()——这会遍历所有在线用户，返回一个包含多个'online'/'offline'的数组，而组件需要的是单个字符串类型的状态值，这才导致了异常。

要正确判断好友是否在线，应该用存在性检查代替遍历映射：

修改后的代码 #

const [friendsList, setFriendsList] = useState([])
const [onlineFriends, setOnlineFriends] = useState([])

let mappedFriendChatList = friendsList.map(friend => {
    const isOnline = onlineFriends.some(onlineFriend => onlineFriend.userId === friend.user_id)
    return(
      <MessengerFriend 
        key={friend.friend_id}
        value={friend}
        status={isOnline ? 'online' : 'offline'}
      />
    )
  })

补充优化（针对大量在线好友场景） #

如果在线好友数量较多，用Set存储在线用户ID能提升查找效率：

// 先把在线用户ID转成Set
const onlineUserIds = new Set(onlineFriends.map(friend => friend.userId))

let mappedFriendChatList = friendsList.map(friend => {
    const isOnline = onlineUserIds.has(friend.user_id)
    return(
      <MessengerFriend 
        key={friend.friend_id}
        value={friend}
        status={isOnline ? 'online' : 'offline'}
      />
    )
  })

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