React-rxjs绑定多Observable仅输出最后一个的问题排查

问题现象 #

我编写了一段GIS地图相关的RxJS代码，通过bind将Observable转为React Hook，期望将接口返回的Feature数组拆分为独立Observable，在组件中分别处理，但遇到两个问题：

1. React组件通过useOneEOWData()只能获取到最后一个Feature的值
2. 直接订阅OneEowData$仅能拿到默认的初始值，无法获取后续更新的数据

核心代码 #

const dummyFeature = {"type":"Feature","geometry":{"type":"Point","coordinates":[0,0]}} as Feature

export const [useOneEOWData, OneEowData$] = bind<Feature>(
  // 用户移动或缩放地图
  zoomMove$.pipe(
    tap(({ bBoxString }) => console.log(`zoom move 2: ${bBoxString}`)),
    switchMap(({ bBoxString }) => EOWObservationData.getLayers(bBoxString)),
    tap((data) => console.log(`use oneEowData tap: ${JSON.stringify(data)}`)),
    concatMap((a) => {
      const features = a && a.length ? a[0].data?.features : null
      return features ? from(features) : null;
    }),
    tap((features: Feature) => console.log(`use oneEowData feature: ${JSON.stringify(features)}`)),
  ),
  dummyFeature,
);

OneEowData$.subscribe();

数据返回情况 #

• EOWObservationData.getLayers返回的完整数据包含多个Feature：

[
  {
    "type": "GEOJSON",
    "data": {
      "type": "FeatureCollection",
      "features": [
        {"type": "Feature", ...},
        {"type": "Feature", ...},
        {"type": "Feature", ...}
      ]
    }
  }
]

• 管道中最后一个tap能打印出每个独立的Feature，但组件Hook只保留最后一个；直接订阅OneEowData$仅拿到初始的dummyFeature

问题原因 #

1. Hook的状态特性：bind生成的React Hook（useOneEOWData）会存储Observable发射的最新值。当你用concatMap(from(features))将数组拆分为单个Feature依次发射时，Hook会不断更新为最新的Feature，最终只保留最后一个值。
2. 订阅时机与Observable特性：你在组件中用空依赖的useEffect订阅OneEowData$，此时组件刚挂载，zoomMove$还未触发（用户未操作地图），所以只能拿到初始的默认值；而你在外部的OneEowData$.subscribe()虽然订阅了流，但没有在组件中跟踪后续发射的值。

解决方案 #

根据你的需求（在组件中处理每个Feature），提供两种可行方案：

方案一：保留完整Feature数组（推荐） #

如果你的核心需求是在组件中遍历处理所有Feature，不需要将它们拆分为独立Observable，直接修改管道逻辑，返回完整的Feature数组：

export const [useOneEOWData, OneEowData$] = bind<Feature[]>(
  zoomMove$.pipe(
    tap(({ bBoxString }) => console.log(`zoom move 2: ${bBoxString}`)),
    switchMap(({ bBoxString }) => EOWObservationData.getLayers(bBoxString)),
    tap((data) => console.log(`use oneEowData tap: ${JSON.stringify(data)}`)),
    // 直接返回Feature数组，不再拆分
    map((a) => {
      return a && a.length ? a[0].data?.features || [] : [];
    }),
    tap((features: Feature[]) => console.log(`use oneEowData features: ${JSON.stringify(features)}`)),
  ),
  [], // 默认值改为空数组
);

组件中使用时，直接拿到数组并遍历：

const LeafletLayers = ({ layers }: Props) => {
  const eowFeatures = useOneEOWData();

  useEffect(() => {
    console.log(`所有Feature: ${JSON.stringify(eowFeatures)}`);
  }, [eowFeatures]);

  // 遍历渲染每个Feature
  return (
    <>
      {eowFeatures.map(feature => (
        <FeatureComponent key={feature.properties.id} feature={feature} />
      ))}
    </>
  );
};

方案二：累积所有发射的Feature（保留拆分逻辑） #

如果必须保留将Feature拆分为独立Observable的逻辑，可以用scan操作符将每次发射的Feature累积为数组，这样Hook就能拿到所有Feature的集合：

export const [useOneEOWData, OneEowData$] = bind<Feature[]>(
  zoomMove$.pipe(
    tap(({ bBoxString }) => console.log(`zoom move 2: ${bBoxString}`)),
    switchMap(({ bBoxString }) => EOWObservationData.getLayers(bBoxString)),
    tap((data) => console.log(`use oneEowData tap: ${JSON.stringify(data)}`)),
    concatMap((a) => {
      const features = a && a.length ? a[0].data?.features : null
      return features ? from(features) : null;
    }),
    tap((feature: Feature) => console.log(`单个Feature: ${JSON.stringify(feature)}`)),
    // 累积Feature为数组，每次新发射时添加到数组中
    scan((acc, curr) => [...acc, curr], [] as Feature[]),
  ),
  [],
);

注意：如果需要每次用户移动/缩放地图时重置Feature数组，需要在switchMap之后添加一个startWith操作，先发射空数组：

switchMap(({ bBoxString }) => 
  EOWObservationData.getLayers(bBoxString).pipe(
    // 先发射空数组重置
    concatMap(data => {
      const features = data && data.length ? data[0].data?.features : null;
      return features ? from([[], ...features]) : from([]);
    })
  )
),

关于直接订阅OneEowData$的问题 #

如果需要在组件中直接订阅流，确保订阅时机能覆盖后续的发射，将OneEowData$作为useEffect的依赖项：

useEffect(() => {
  const sub = OneEowData$.subscribe(data => {
    console.log(`订阅到的数据: ${JSON.stringify(data)}`);
  });
  return () => sub.unsubscribe();
}, [OneEowData$]); // 添加依赖，确保Observable变化时重新订阅

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