DataListStore 的 ReactJS Fixed-Data-Table 和 Async JSON

Question

我正在尝试学习使用 ES6 的 ReactJS 以及设置 Fixed-Data-Table 的实例。我正在使用 github 存储库中的 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;

如您所见，我或多或少地遵循了 fixed-data-table 示例中提供的 FakeObjectDataListStore。 JSON 被正确获取，_cache 填充了一个对象数组，当您在执行 getRemoteData 后输出 getSize 时，您确实获得了 _cache 的大小。但是，我还没有弄清楚一旦获取数据后应该如何更新我的 fixed-data-table Table 组件。目前 Table 已呈现，但只是空白，没有行。

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;

我认为主要问题是，一旦 MyDataListStore 中填充了来自异步调用的数据，我就没有任何代码来填充 table。但是，我无法从 Fixed-Data-Table github 存储库或文档中给出的示例中找到任何帮助。知道如何完成这项工作吗？我想我需要设置某种事件侦听器，但我不确定 where/how 是否要这样做，因为我对 ReactJS 和 Fixed-Data-Table 还是个新手。

编辑：我还应该补充一点，当页面加载时，我收到以下错误：未捕获的类型错误：无法读取未定义的属性 'id' 一旦我将初始 this.size 设置为大于 0。所以当然 table 在第一次加载时没有可用数据。

编辑 2：在进一步研究之后，看起来如果我运行在我的 ObjectDataExample 的 componentDidMount 中获取并使用 this.setState();重置 dataList 对象，然后更新 table。但是，这看起来有点乱，我认为有更好的方法可以直接从我的 MyDataListStore 对象执行此操作。

谢谢，

Answer 1

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

您可以这样做的一种可能方法是实现某种工厂功能（在下面的示例中，我假装存在一个名为 MyDataListStore.of 的工厂功能），return 是一个 Promise 最终加载数据后解析 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 更新为 return 承诺。这将允许我们的 MyDataListStore class 的任何客户端收到数据已加载的通知：

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?
        }
    });
}

DataListStore 的 ReactJS Fixed-Data-Table 和 Async JSON

ReactJS Fixed-Data-Table and Async JSON for DataListStore

json

reactjs

ecmascript-6

fixed-data-table