getStream订阅活动事件处理最佳实践及只读属性问题咨询

错误原因 #

getStream SDK返回的Feed响应对象（包括内部的activities数组）是只读冻结的，目的是防止意外修改破坏SDK内部状态一致性，直接操作这些对象就会触发TypeError: Cannot assign to read only property 'activities'。

具体解决步骤 #

1. 创建可修改的活动数组副本
   不要直接操作SDK返回的原始activities，先通过展开运算符或数组方法生成可修改的副本：

// 从现有状态中取出活动列表
const { activities: existingActivities } = feedData;
// 生成可修改的副本
const mutableActivities = [...existingActivities];

2. 插入新活动并去重
   实时推送可能会重复发送活动，先验证新活动未存在，再插入到副本顶部：

// newActivity 是订阅推送来的单条新活动
const isDuplicate = mutableActivities.some(act => act.id === newActivity.id);
if (!isDuplicate) {
  mutableActivities.unshift(newActivity);
}

3. 更新状态时替换整个响应对象
   因为原始Feed响应是只读的，更新状态时要展开原有对象，替换activities字段：

setFeedData(prevFeedData => ({
  ...prevFeedData,
  activities: mutableActivities
}));

额外最佳实践 #

• 嵌套对象深拷贝：如果活动包含嵌套的复杂对象（比如actor、object），用JSON.parse(JSON.stringify(activity))或深拷贝工具生成完全可修改的副本，避免嵌套属性只读的问题。
• 分页状态同步：如果用户正在浏览旧分页，插入新活动后不要自动滚动到顶部，保持当前滚动位置；仅在用户点击"查看新活动"按钮时再滚动到顶部。
• 批量处理推送：如果短时间内收到多个活动推送，先收集起来再批量插入，减少状态更新次数提升性能。

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