使用Ably React Hooks更新成员状态时presenceData列表重复异常

核心原因 #

Ably Presence 是通过 clientId 唯一区分频道内成员的，你的问题大概率是因为没有为每个客户端显式设置唯一的 clientId，或者处理 presenceData 时没有正确关联 clientId 与自定义用户标识，导致 usePresence 钩子更新状态时错误覆盖了其他成员的条目。

具体解决方案 #

1. 为每个客户端设置唯一 clientId #

初始化 Ably 客户端时，必须将 clientId 设置为用户的唯一标识（比如你的 user.id），让 Ably 能准确区分不同成员：

import { AblyProvider } from '@ably-labs/react-hooks';
import Ably from 'ably';

// 为当前用户创建带唯一 clientId 的 Ably 实例
const ablyClient = new Ably.Realtime({
  key: '你的 Ably API 密钥',
  clientId: user.id // 与自定义的用户 id 字段保持一致
});

// 在根组件中通过 Provider 传递客户端实例
<AblyProvider client={ablyClient}>
  {/* 你的应用组件 */}
</AblyProvider>

2. 正确解析 presenceData 结构 #

usePresence 返回的 presenceData 数组元素是 PresenceMessage 对象，而非你直接传入的状态对象，结构包含 clientId、data（你的自定义状态）和 action 字段。需要提取 data 字段获取用户状态：

// 从 presenceData 中提取自定义用户状态
const members = presenceData.map(presenceMsg => presenceMsg.data);

之后用 members 数组渲染成员列表。

3. 保持更新状态的标识一致性 #

调用 updateStatus 时，传递的状态对象中的 id 必须与 clientId 一致（已设置为 user.id），避免标识混乱：

// 更新当前用户状态，确保 id 与 clientId 匹配
updateStatus({ ...user, isModerator: true });

4. 渲染列表使用唯一 key #

渲染成员列表时，不要用数组索引作为 key，必须使用用户唯一标识（比如 id），避免 React 渲染错误：

members.map(member => (
  <div key={member.id}>
    {member.name} - {member.isModerator ? '管理员' : '普通用户'}
  </div>
))

验证逻辑 #

你提到回调中的 presenceUpdate 数据正确，说明 Ably 服务端已正确处理状态更新，问题出在本地状态管理或数据解析上。按上述步骤调整后，presenceData 应该能正确保留两个不同成员的状态。

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