Reactjs 反应表：调用时引发异常'；getResolvedState（）'；关于组件参考

我试图使用React表、React csv包和TypeScript实现下载特性

我试图使用

createRef（）

创建并使用表组件的引用，但是它引发了以下异常

“类型'REOBJECT'上不存在属性'getResolvedState'”错误

我的代码如下：

import {CSVLink} from "react-csv";
import * as React from 'react';
import ReactTable from 'react-table';

export default class Download extends React.Component<{},{}> {

  private reactTable: React.RefObject<HTMLInputElement>;
  constructor(props:any){
    super(props);
    this.state={} // some state object with data for table
    this.download = this.download.bind(this);
    this.reactTable = React.createRef();
  }

   download(event: any)
   {
    const records =this.reactTable.getResolvedState().sortedData; //ERROR saying getResolved state does not exist
     //Download logic
   }

    render()
    {
       return(
       <React.Fragment>
       <button onClick={this.download}>Download</button>
       <ReactTable 
           data={data} //data object
           columns={columns}  //column config object
           ref={this.reactTable}
       />
     </React.Fragment>
    }
}

Any help would be appreciated

从“react csv”导入{CSVLink}；
从“React”导入*作为React；
从“反应表”导入反应表；
导出默认类下载扩展React.Component{
私有reactable:React.reobject；
构造器（道具：任何）{
超级（道具）；
this.state={}//包含表数据的某个状态对象
this.download=this.download.bind（this）；
this.reactTable=React.createRef（）；
}
下载（事件：任何）
{
const records=this.reactable.getResolvedState（）.sortedData；//表示getResolved状态不存在时出错
//下载逻辑
}
render（）
{
返回(
下载
}
}
任何帮助都将不胜感激

您应该发现问题通过以下方式得到解决：

修改将

反应表

ref与

组件关联的方式，以及

从reactable ref的

current

字段访问

getResolvedState（）

也可以考虑包装两个渲染元素以确保正确的渲染行为：

/* Note that the reference type should not be HTMLInputElement */
private reactTable: React.RefObject<any>;

constructor(props:any){
  super(props);
  this.state={};
  this.download = this.download.bind(this);
  this.reactTable = React.createRef();
}

download(event: any)
{
   /* Access the current field of your reactTable ref */
   const reactTable = this.reactTable.current;

   /* Access sortedData from getResolvedState() */
   const records = reactTable.getResolvedState().sortedData;

   // shortedData should be in records
}

render()
{
   /* Ensure these are correctly defined */
   const columns = ...;
   const data = ...;

   /* Enclose both elements in fragment, and pass reactTable ref directly */
   return <React.Fragment>
   <button onClick={this.download}>Download</button>
   <ReactTable 
       data={data}
       columns={columns}
       ref={ this.reactTable } />
   </React.Fragment>
}

/*请注意，引用类型不应为HTMLInputElement*/
私有reactable:React.reobject；
构造器（道具：任何）{
超级（道具）；
this.state={}；
this.download=this.download.bind（this）；
this.reactTable=React.createRef（）；
}
下载（事件：任何）
{
/*访问reactable ref的当前字段*/
const reactable=this.reactable.current；
/*从getResolvedState（）访问sortedData*/
const records=reactTable.getResolvedState（）.sortedData；
//短数据应保存在记录中
}
render（）
{
/*确保这些都是正确定义的*/
常量列=。。。；
常数数据=。。。；
/*将这两个元素都包含在片段中，并直接传递reactable ref*/
返回
下载
}

---

希望有帮助！

谢谢！现在它抛出的“对象可能为空！类型“HtmlLevel”上不存在属性“getResolvedState”。“太好了-很高兴我能提供帮助：-）您能在新帖子中发布此问题吗？把链接发给我？在评论区有点难理解您的问题：-）