Skip to content

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

@yangvom

Description

@yangvom

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions