React+Firebase实现仅展示好友列表的技术问题求助

问题根源 #

你当前代码的核心问题是直接将user.id与整个friends数组做相等判断（user.id == friends），这显然不成立——user.id是单个用户ID字符串，而friends是存储多个ID的数组，两者类型和值都无法匹配。另外你的useEffect存在性能隐患：没有设置依赖项，会导致组件每次渲染都触发setFriends，造成不必要的重渲染。

解决方案 #

1. 修复useEffect的依赖问题

给useEffect添加userInfo作为依赖，确保只有当userInfo变化时才更新好友列表，同时默认空数组避免后续判断出错：

const [friends, setFriends] = useState([]);

useEffect(() => {
    setFriends(userInfo[0]?.data.friends || []);
}, [userInfo]); // 添加依赖项，避免无限重渲染

2. 修正用户过滤逻辑

使用数组的includes方法检查当前用户ID是否存在于friends数组中，同时用可选链?.处理friends可能为undefined的情况：

<Row>
{users.map(user => (
    friends?.includes(user.id) ? (
        <Col key={user.id}> {/* key需放在映射后的最外层元素上 */}
            <div id={user.id}>
                <h3>{user.data.name}</h3>
                <Link>
                    <button>View Profile</button>
                </Link>
            </div>
        </Col>
    ) : null
))}
</Row>

额外优化：提前过滤用户数组

如果users数组较大，建议先在渲染前过滤出好友用户，再进行映射，代码可读性和性能会更好：

// 提前过滤出好友列表中的用户
const friendUsers = users.filter(user => friends?.includes(user.id));

return (
    <Row>
        {friendUsers.map(user => (
            <Col key={user.id}>
                <div id={user.id}>
                    <h3>{user.data.name}</h3>
                    <Link>
                        <button>View Profile</button>
                    </Link>
                </div>
            </Col>
        ))}
    </Row>
);

关键说明 #

• friends?.includes(user.id)：可选链?.确保当friends为undefined时不会抛出错误，includes方法用于判断数组中是否包含指定元素
• 始终将key属性放在映射后的最外层元素上，符合React列表渲染的规范
• 给useEffect添加依赖项是React性能优化的基础操作，避免无效重渲染

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