React状态中类实例用扩展运算符丢失方法的解决方法

问题原因 #

用{...room}扩展运算符处理Room类实例时，只会复制实例自身的可枚举属性，不会保留原型链上的类方法（比如sendReinvite）。第一次点击后，state里的内容变成了普通对象，第二次调用room.sendReinvite()自然会报错。

解决方案 #

方案1：创建新的Room实例（推荐，如果构造逻辑简单） #

基于原实例的属性创建新的Room实例，确保新对象依然是类的实例，保留所有原型方法：

const toggleScreenSharing = () => {
  // 复制并更新participant属性
  const updatedParticipant = {
    ...room.participant,
    screensharing: !room.participant.screensharing
  };
  
  // 创建新的Room实例，传入原有必要参数（比如name）
  const newRoom = new Room(room.name);
  // 复制原实例的所有属性到新实例，覆盖participant
  Object.assign(newRoom, room, { participant: updatedParticipant });
  
  newRoom.sendReinvite();
  changeRoom(newRoom);
};

方案2：保留原型链的情况下更新实例引用 #

如果不想重新创建实例，可以通过Object.create继承原实例的原型，再复制属性，确保新对象保留类方法：

const toggleScreenSharing = () => {
  // 直接修改原实例的属性（注意：仅当第三方类允许直接修改内部状态时使用）
  room.participant.screensharing = !room.participant.screensharing;
  room.sendReinvite();
  
  // 创建继承原实例原型的新对象，复制所有属性，触发React状态更新
  const updatedRoom = Object.assign(
    Object.create(Object.getPrototypeOf(room)),
    room
  );
  changeRoom(updatedRoom);
};

方案3：优先使用SDK提供的官方方法 #

如果第三方Room类提供了更新参与者状态的实例方法（比如类似updateParticipant的API），优先调用官方方法更新状态，再触发React状态更新，这样能避免手动修改内部状态带来的问题。

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