antvis / antvis/G6

[Bug]: destroy() 后,会设置 `this.context = {}` ,但是一些异步方法里面访问 this.context.xxx.abc 报错。

Open
#7,516 4 comments 0 reactions 0 assignees View on GitHub
bug 🐛
Dominant language
TypeScript
Stars
12.3k
Forks
1.6k
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug / 问题描述

## 复现问题

此复现仅 通过 StrictMode 来复现问题
https://codesandbox.io/p/sandbox/fcfft5?file=%2Fsrc%2FApp.tsx%3A28%2C7

Image

分析:
- StrictMode 会二次更新,从而第一次会 destroy()
- destroy 设置 `this.context = {}` https://github.com/antvis/G6/blob/v5/packages/g6/src/runtime/graph.ts#L1297
- render 这里读取 this.context.element!.draw,从而导致错误 https://github.com/antvis/G6/blob/v5/packages/g6/src/runtime/graph.ts#L1201

## 相似问题

同理如果用户进度 Graph 页面,又马上离开,情况会 StrictMode 一样,我发现了这些问题。

- autoFix 报错
- render 里有 await ,之后 调用 autoFix https://github.com/antvis/G6/blob/v5/packages/g6/src/runtime/graph.ts#L1196
- autoFix 读取出错 `const { autoFit } = this.context.options;` 因为 options 为 undefined https://github.com/antvis/G6/blob/v5/packages/g6/src/runtime/graph.ts#L1372

- transformDataAfterLayout 出错
- 调用 postLayout https://github.com/antvis/G6/blob/v5/packages/g6/src/runtime/graph.ts#L1208
- postLayout 有 await 之后 调用 transformDataAfterLayout
- 读取 `const transforms = this.context.transform.getTransformInstance();` 报错,因为 transform 为 undefined

### Reproduction link / 复现链接

https://codesandbox.io/p/sandbox/fcfft5?file=%2Fsrc%2FApp.tsx%3A28%2C7

### Steps to Reproduce the Bug or Issue / 重现步骤

_No response_

### Version / 版本

Please select / 请选择

### OS / 操作系统

- [x] macOS
- [ ] Windows
- [ ] Linux
- [ ] Others / 其他

### Browser / 浏览器

- [x] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他

Contributor guide

No contributing guide indexed for this repository

Research direction

Start in packages/g6/src/runtime/graph.ts at destroy(), render(), autoFix(), postLayout(), and transformDataAfterLayout(), then run the linked CodeSandbox reproduction under StrictMode. Trace the awaited paths after destroy() clears context. Done means the reproduction no longer throws when a graph is destroyed during these asynchronous operations.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.