Skip to content

🤔 [QUESTION]基于useCreateLayer的组件在遇到Suspense的情况下会重复创建图层 #250

Description

@zjtakato

🐛 Question description [Please make everyone to understand it]

所有基于 useCreateLayer的 Layer 组件在 React 19 下对 Suspense不友好,原因是“在 render 阶段创建并 addLayer,清理由 effect 管理”,而 effect 不会在被丢弃的 render 上运行。

💻 Link to minimal reproduction

import { Suspense, useState } from 'react';
import { LarkMap, LineLayer } from '@antv/larkmap';

const lineData = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'LineString',
        coordinates: [
          [113.27, 23.12],
          [113.31, 23.16],
        ],
      },
    },
  ],
};

const SuspenseGate = () => {
  const [ready, setReady] = useState(false);
  if (!ready) {
    throw new Promise<void>((resolve) => {
      setTimeout(() => {
        setReady(true);
        resolve();
      }, 0);
    });
  }
  return null;
};

const Layers = () => (
  <>
    <LineLayer color="#3d7fba" size={2} source={{ data: lineData, parser: { type: 'geojson' } }} />
    <SuspenseGate />
  </>
);

export default function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <LarkMap
        onSceneLoaded={(scene) => {
          window.scene = scene;
        }}
        style={{ width: '100%', height: '100%' }}
        mapType="Gaode"
        mapOptions={{
          center: [113.29, 23.14],
          zoom: 13,
          style: 'amap://styles/normal',
          token: 'xx',
        }}
      >
        <Suspense fallback={<div style={{ color: '#fff' }}>loading…</div>}>
          <Layers />
        </Suspense>
      </LarkMap>
    </div>
  );
}

在控制台输入scene.getLayers()可以看到有多个LineLayer

🏞 Expected result

Marker组件在Suspense的情况下是符合预期的。预期在遇到Suspense的情况下结果与Marker的行为一致。

🚑 Any additional [like screenshots]

  • LarkMap Version: 1.5.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions