-
Notifications
You must be signed in to change notification settings - Fork 33
🤔 [QUESTION]基于useCreateLayer的组件在遇到Suspense的情况下会重复创建图层 #250
Copy link
Copy link
Open
Description
🐛 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
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels