1

Fixed-Data-Tableのインスタンスを設定するとともに、ES6でReactJSを学習しようとしています。github リポジトリの ObjectDataExample の例を使用していますが、DataListStore に供給される faker() 値の代わりに、リモート JSON リソースからキャッシュを取得する DataListStore を使用したいと考えています。これは、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 コンポーネントをどのように更新する必要があるかわかりません。現在、テーブルはレンダリングされていますが、行のない単純な空白です。

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 リポジトリまたはドキュメントに記載されている例からは何の助けも見つかりません。これを行う方法はありますか？ある種のイベントリスナーをセットアップする必要があると思いますが、ReactJS と Fixed-Data-Table の両方にまだ慣れていないため、どこでどのようにこれを行うべきかわかりません。

編集:ページが読み込まれると、次のエラーが表示されることも追加する必要があります: Uncaught TypeError: Cannot read property 'id' of undefined once I set the initial this.size to more than 0. したがって、もちろんテーブルはそうではありません最初のロード時に利用可能なデータを持っています。

編集 2:これをさらに調べた後、ObjectDataExample の componentDidMount でフェッチを実行し、this.setState(); を使用すると、次のようになります。dataList オブジェクトをリセットするには、テーブルを更新します。ただし、これは少し面倒なので、MyDataListStore オブジェクトから直接これを行うより良い方法があると思います。

ありがとう、

4

1 に答える 1

1

の現在の実装に関する設計上の問題の 1 つMyDataListStoreは、データがロードされたときに呼び出し元に通知する方法が提供されないことです。

MyDataListStore.ofこれを行う 1 つの可能な方法は、データが読み込まれると最終的に MyDataListStore インスタンスを解決する Promise を返す、ある種のファクトリ関数を実装することです (以下の例では、 という関数が存在するふりをしています)。

// 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 ... */
}

最後に、promise を返すように 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 に答える