antd-table-infinity icon indicating copy to clipboard operation
antd-table-infinity copied to clipboard

Cannot read property 'getElementsByTagName' of undefined

Open GeorgeCodeHub opened this issue 4 years ago • 4 comments

Hello there.

I'm unable to start a project with your library. Here is an example below:

https://stackblitz.com/edit/antd-infinity

I also tried making it in CodeSandbox and codePen and got the same issue.

Am I forgetting to add something?

GeorgeCodeHub avatar May 18 '20 10:05 GeorgeCodeHub

I am also getting the same issue. @GeorgeCodeHub did you find any solution?

kumawatanupriya avatar May 23 '20 10:05 kumawatanupriya

Sadly no. Something must be conflicting with either the antD or React lib...

GeorgeCodeHub avatar May 24 '20 16:05 GeorgeCodeHub

If you're still looking for a solution, the problem is that the code does not like an empty array for data. Having at least one row in the table by default is needed, otherwise the thing craps out.

marcellp avatar May 28 '20 09:05 marcellp

I found that the reason might be antd's version is too high. When I used antd v3.26.15, the component would run correctly.

I used antd v4.8.2. And I traced the error. It's cause of these codes

componentDidMount() {
    /* eslint-disable */
    this.refScroll = ReactDOM.findDOMNode(this).getElementsByClassName(
      'ant-table-body',
    )[0];
    this.refTable = this.refScroll.getElementsByTagName('tbody')[0];
    ...
}

I found ReactDOM.findDOMNode(this) is

<div class="ant-table-wrapper table">
  <div class="ant-spin-nested-loading">
    <div class="ant-table">
      <div class="ant-table-container">
        <div class="ant-table-content">
          <table>
            <colgroup>...</colgroup>
            <thead class="ant-table-thead">...</thead>
            <tbody class="ant-table-tbody">...</tbody>
          </table>
        </div> 
      </div>
    </div>
  </div>
</div>

It's obvious that this.refScroll would be undefinde.

If u change the code to

componentDidMount() {
    /* eslint-disable */
    this.refScroll = ReactDOM.findDOMNode(this).getElementsByClassName(
      'ant-table', // changed here
    )[0];
    this.refTable = this.refScroll.getElementsByTagName('tbody')[0];
    ...
}

The component would run correctly.

The last commit was pushed one year ago. So I think we should not use the package any more.

RalfZhang avatar Nov 25 '20 03:11 RalfZhang