DataListStore的ReactJS固定数据表和异步JSON

我正在尝试使用ES6学习ReactJS，同时设置一个固定数据表的实例。我使用的是github repo中的ObjectDataExample示例，但我希望使用从远程JSON资源获取缓存的DataListStore，而不是提供给DataListStore的faker（）值。我是这样定义我的DataListStore的：

class MyDataListStore {

constructor(/* url string */ url) {
    this.url = url || 'http://localhost:8080/default-json';
    this._cache = [];
    this.pageSize = 1;
    this.size = 0;
    this.getRemoteData(url);
}

getRemoteData() {
    /**
     * Fetch remote JSON to be used in the store.
     */
    var that = this;
        fetch(this.url).then(function(response) {
          return response.json();
        }).then(function(j) {
          console.log(j);
          //this.pageSize = j["pages"];
          that.size = j["total"];
          that._cache = j["table"];
    if (that._cache) {
       // do something here?
    }
        });
}

getObjectAt(/*number*/ index) /*?object*/ {
    if (index < 0 || index > this.size){
        return undefined;
    }
    if (this._cache[index] === undefined) {
        //this._cache[index] = this.createFakeRowObjectData(index);
    }
    return this._cache[index];
}

getSize() {
    return this.size;
}


}

module.exports = MyDataListStore;

类MyDataListStore{
构造函数（/*url字符串*/url）{
this.url=url | |'http://localhost:8080/default-json'；
这个。_cache=[]；
此参数为.pageSize=1；
此值为0.size=0；
这个.getRemoteData（url）；
}
getRemoteData（）{
/**
*获取要在存储中使用的远程JSON。
*/
var=这个；
fetch（this.url）.then（函数（响应）{
返回response.json（）；
}).然后（函数（j）{
控制台日志（j）；
//this.pageSize=j[“pages”]；
即.size=j[“总计”]；
那._cache=j[“表”]；
如果（那个._缓存）{
//在这里做点什么？
}
});
}
getObjectAt（/*number*/index）/*？对象*/{
如果（索引<0 | |索引>此.size）{
返回未定义；
}
if（此._缓存[索引]==未定义）{
//this._cache[index]=this.createFakeRowObjectData（index）；
}
返回此。_缓存[索引]；
}
getSize（）{
返回此.size；
}
}
module.exports=MyDataListStore；

正如您所看到的，我或多或少地遵循了固定数据表示例中提供的FakeObjectDataListStore。正确获取JSON，使用对象数组填充_缓存，并且在执行getRemoteData后输出getSize时，确实会获得_缓存的大小。然而，我还没有弄清楚一旦数据被提取出来，我的固定数据表组件应该如何更新。当前该表已呈现，但为空，没有行

class ObjectDataExample extends React.Component {
constructor(props) {
    super(props);
    this.state = {
    dataList: new MyDataListStore()
    };
}
render() {
    var {dataList} = this.state;
        return <Table
        rowHeight={70} rowsCount={dataList.getSize()} width={1170} height={500} headerHeight={30}>
    <Column
        header={<Cell>ID</Cell>}
    cell={<TextCell data={dataList} col="id" />}
        width={50}
    fixed={true}
    />
    <Column
        header={<Cell>Email</Cell>}
    cell={<TextCell data={dataList} col="email" />}
        width={300}
    fixed={true}
    />
    </Table>
}
}

module.exports = ObjectDataExample;

类ObjectDataExample扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
dataList:新的MyDataListStore（）
};
}
render（）{
var{dataList}=this.state；
返回
}
}
module.exports=ObjectDataExample；

我认为主要的问题是，一旦MyDataListStore被异步调用的数据填充，我就没有任何用于填充表的代码。但是，我无法从固定数据表github repo或文档中给出的示例中找到任何帮助。你知道怎么做吗？我假设我需要设置某种类型的事件侦听器，但我不确定在何处/如何设置，因为我对ReactJS和Fixed Data Table都还是新手

编辑：我还应该补充一点，当页面加载时，我会出现以下错误： 未捕获的TypeError:无法读取未定义的属性“id” 一旦我将初始this.size设置为大于0。因此，表在第一次加载时当然没有可用的数据

编辑2：在进一步研究这个问题之后，看起来好像我运行ObjectDataExample的fetch-in组件didMount并使用这个.setState（）；重置dataList对象，然后更新表。但是，这看起来有点混乱，我认为有更好的方法可以直接从MyDataListStore对象执行此操作

---

谢谢，

MyDataListStore当前实现的一个设计问题是，它没有提供在加载数据时通知调用方的方法

一种可能的方法是实现某种工厂函数（在下面的示例中，我假设存在一个名为

MyDataListStore.of

）的函数，该函数返回一个承诺，在数据加载后最终解析MyDataListStore实例：

// In the ObjectData component constructor, we call the MyDataListStore
// factory function and once it resolves, we assign it to our
// state. This will cause our component to re-render.
constructor() {
   MyDataListStore.of(myDataListStoreUrl).then(store => {
       this.setState({ dataList: store });
   });
}

现在，一旦数据列表存储区中的数据解析，我们的模板（在

render

函数中指定）将正确呈现

我们前面使用的函数的

DataListStore.of可能如下所示：

class MyDataListStore {
    static of(url) {
       const dataListStore = new MyDataListStore(url);
       return dataListStore.getRemoteData().then(() => return dataListStore);
    }
    /* ... other MyDataListStore properties/methods ... */
}

最后，我们需要更新getRemoteData以返回承诺。这将允许MyDataListStore类的任何客户端收到数据已加载的通知：

getRemoteData() {
    /**
     * Fetch remote JSON to be used in the store.
     */
    var that = this;

    // Return the chained promise! This promise will resolve
    // after our last callback is called. 
    return fetch(this.url).then(function(response) {
        return response.json();
    }).then(function(j) {
        console.log(j);
        //this.pageSize = j["pages"];
        that.size = j["total"];
        that._cache = j["table"];

        if (that._cache) {
            // do something here?
        }
    });
}