1

我正在尝试使用 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;

如您所见，我或多或少地遵循了固定数据表中的示例提供的 FakeObjectDataListStore。JSON 被正确获取，_cache 填充了一个对象数组，当你在 getRemoteData 执行后输出 getSize 时，你确实得到了 _cache 的大小。但是，我还没有弄清楚一旦获取数据后应该如何更新我的固定数据表 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 填充了来自异步调用的数据，我就没有任何代码来填充表。但是，我无法从 Fixed-Data-Table github repo 或文档中给出的示例中找到任何帮助。知道如何完成这项工作吗？我假设我需要设置某种事件侦听器，但我不确定在哪里/如何执行此操作，因为我对 ReactJS 和 Fixed-Data-Table 仍然是新手。

编辑：我还应该补充一点，当页面加载时，我收到以下错误： Uncaught TypeError: Cannot read property 'id' of undefined 一旦我将初始 this.size 设置为大于 0。所以当然表没有首次加载时具有可用数据。

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

谢谢，

4

1 回答 1

1

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

您可能会这样做的一种可能方法是实现某种工厂函数（在下面的示例中，我假装存在一个称为MyDataListStore.of），它返回一个 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 以返回一个承诺。这将允许我们的 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?
        }
    });
}
于 2016-03-01T21:22:27.197 回答