VisActor / VisActor/VTable

[Bug] 在自定义单元格布局时使用ReactVTable.Link某些情况下会报错:Cannot read properties of undefined (reading 'renderNextFrame')

Open
#4,836 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
3.7k
Forks
486
Avg merge
1d 19h
Merged PRs (30d)
16

Description

Version

1.22.7

Link to Minimal Reproduction

Steps to Reproduce

表格中每一行数据(至少100行)所有列都是自定义单元格布局,其中有6列使用相同的自定义单元格布局组件(如下):

<ReactVTable.Group
      attribute={{
        width,
        height,
        display: "flex",
        flexWrap: "nowrap",
        flexDirection: "row",
        alignItems: "center",
        alignContent: "center",
        justifyContent: "center",
      }}
      onMouseEnter={(event) => {
        setHover(true);
        event.currentTarget.stage.renderNextFrame();
      }}
      onMouseLeave={(event) => {
        setHover(false);
        event.currentTarget.stage.renderNextFrame();
      }}
    >
      <ReactVTable.Group
        attribute={{
          width: width - 16,
          height,
          display: "flex",
          flexWrap: "nowrap",
          flexDirection: "row",
          alignItems: "flex-start",
          alignContent: "flex-start",
          justifyContent: "space-between",
        }}
      >
        <ReactVTable.Group
          attribute={{
            width: width - 30,
            height,
            display: "flex",
            flexWrap: "wrap",
            flexDirection: "row",
            alignItems: "center",
            alignContent: "center",
            justifyContent: "flex-start",
            clip: true,
          }}
        >
          <ReactVTable.Link
            maxWidth={width - 16}
            onClick={handleView}
            textStyle={{
              fontSize: 12,
              fill: "rgb(51, 101, 238)",
            }}
            panelStyle={{
              visible: true,
              boundsPadding: [6, 12],
            }}
          >
            查看
          </ReactVTable.Link>
        </ReactVTable.Group>
      </ReactVTable.Group>
    </ReactVTable.Group>

表格渲染后,控制台批量报错:

Image

Link组件错误位置:

Image

我尝试把 ReactVTable.Link 换成 ReactVTable.Button,也会出同样的错误。

Current Behavior

出错的单元格未正常渲染(前面使用相同单元格组件的列渲染正常):

Image
Expected Behavior

能正常渲染不出错

Environment
- OS: MacOS Tahoe
- Browser: Edge 143.0.3650.80
- Framework: React 18.x
Any additional comments?

暂时用 ReactVTable.Tag 代替 ReactVTable.Link 后正常,只是 Tag 的 TagProps 没继承 IEventParamsType,需要手动屏蔽错误提示:

          <ReactVTable.Tag
            maxWidth={width - 16}
            /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
            /* @ts-expect-error */
            onClick={handleView}
            padding={[4, 6]}
            textStyle={{
              fontSize: 12,
              cursor: "pointer",
              fill: "white",
            }}
            panelStyle={{
              visible: true,
              boundsPadding: [6, 12],
              fill: "#165dff",
            }}
          >
            查看
          </ReactVTable.Tag>

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with ReactVTable.Link or Button in a custom cell layout across at least 100 rows and six repeated columns. Inspect the component error location and the renderNextFrame call path, comparing the failing cells with the earlier cells that render correctly. Done means all cells render without the undefined renderNextFrame error.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.