TypeScript+React中对象内容变更但引用相等致useEffect不触发问题

你的核心问题是React依赖对象引用变化判断状态更新，但updateStop方法是原地修改原Trip对象的内部属性，最后返回原对象引用，所以oldTrip === updatedTrip为true，调用setTrip(updatedTrip)时React认为状态未变更，不会触发重渲染和useEffect。

而oldTrip.getStops() === updatedTrip.getStops()为false，是因为getStops每次调用都会返回flatMap生成的新数组（新引用），但Trip对象本身的引用没变，所以React不关心这个数组的变化。

1. 返回新的Trip实例（推荐，符合不可变数据原则） #

修改updateStop方法，不要原地修改原对象，而是逐层创建新的Trip、Itinerary、Stop实例，保证顶层引用变化：

public updateStop(stop: PassTimeUpdate): Trip {
  // 遍历行程，创建新的行程数组
  const newItineraries = this.itenaries.map(itinerary => {
    // 遍历当前行程的站点，创建新站点数组
    const newStops = itinerary.stops.map(stopItem => {
      if (stopItem.userStopCode === stop.UserStopCode) {
        // 创建新的站点实例，更新状态
        return new IteneraryStop({
          ...stopItem,
          tripStopStatus: stop.TripStopStatus
        });
      }
      return stopItem;
    });
    // 创建新的行程实例
    return new Itinerary({
      ...itinerary,
      stops: newStops
    });
  });
  // 创建新的Trip实例并返回
  return new Trip({
    ...this,
    itenaries: newItineraries
  });
}

注意：需要确保你的Trip、Itinerary、IteneraryStop类支持通过对象字面量（或拷贝构造函数）创建新实例，这样每次更新都会生成全新的引用链，React能立刻识别到状态变化。

2. 手动生成新引用（快速临时方案） #

如果不想修改类的内部逻辑，在调用setTrip时手动创建新的顶层对象，强制改变引用：

const updatedTrip = trip.updateStop(newStopData);
// 通过展开运算符创建新对象，改变顶层引用
setTrip({ ...updatedTrip });

提示：这是浅拷贝，如果Trip内部有深层嵌套对象，内部引用仍会保持不变，但只要顶层引用变化，React就会触发重渲染；如果useEffect依赖的是深层属性，可能需要使用深拷贝（如structuredClone）。

3. 增加版本标识（兼容原有可变逻辑） #

在Trip类中添加一个自增的版本号属性，每次更新时递增，同时将版本号纳入React状态的依赖：

class Trip {
  private updateVersion = 0;

  public updateStop(stop: PassTimeUpdate): Trip {
    const stops = this.getStops();
    const stopToUpdate = stops.find(s => s.userStopCode === stop.UserStopCode);
    if (!stopToUpdate) return this;

    stopToUpdate.updateStop(stop);
    this.updateVersion++; // 更新时递增版本号
    return this;
  }

  public getUpdateVersion(): number {
    return this.updateVersion;
  }
}

然后在组件中：

useEffect(() => {
  // 这里的逻辑会在版本号变化时触发
}, [trip.getUpdateVersion()]);

补充：如果还是需要触发setTrip，可以结合函数式更新，即使引用相同，也能强制React检测变化：

setTrip(prev => prev);

但这种方式不够优雅，优先推荐第一种不可变方案。

• 克隆对象：如果是浅克隆，顶层引用变了但内部嵌套对象还是原引用；如果克隆后又修改了原对象，等于白克隆。
• 更新internalID：如果是在原Trip对象上修改internalID，对象引用仍未改变，React依然认为是同一个对象，不会触发更新。

内容的提问来源于stack exchange，提问作者Tristan T.