reactjs - react-grid-layout にレイアウトが表示されない

Question

ライブラリ react-grid-layout で問題が発生しましたが、それがバグなのか、私のやり方が悪いのかわかりません。ここで問題を提起しましたが、考えれば考えるほど、これほど大きな問題が見過ごされている可能性は低くなります。ここで私が経験していることのデモを見つけることができます

私がやろうとしていること

react-grid-layout を使用してダッシュボードを作成したいと思います。私は コンテナパターンを実装しようとしているので、彼の状態を介してレイアウトを制御し、このレイアウトを小道具のダッシュボードコンポーネントに渡すDashboardContainerコンポーネントがあります。

私が遭遇する問題

初期状態では要素が正しく配置されていますが、アイテムを追加すると、追加された要素の x、y、w、および h が正しくありません。最初の加算では (5,0,2,2) である必要があり、最終的に (0,4,1,1) に配置されますt は正しいキーを持っていますが、私のキーは正しいと思います。

例: このレイアウトはダッシュボードレイアウト データに渡されます

しかし、これは表示されたレイアウトです (要素「new0」は対応していません) 表示されたレイアウト

私のコード

これが私のDashboardContainerコンポーネントの（簡略化された）コードです

import React from "react";
import ReactDOM from "react-dom";
import Dashboard from "./Dashboard";

class DashboardContainer extends React.Component {
  static defaultProps = {
    maxRows: 8,
    cols: 12
  };

  state = {
    layout: [
      { i: "key0", x: 0, y: 0, w: 2, h: 2 },
      { i: "key1", x: 2, y: 0, w: 3, h: 2 },
      { i: "key2", x: 2, y: 2, w: 2, h: 2 },
      { i: "key3", x: 8, y: 0, w: 3, h: 2 }
    ],
    newElementsCount: 0
  };

  onLayoutChange = l => {
    this.setState({ layout: l });
  };

  add = () => {
    // here we calculate where the new element should be placed
    var x = foundX, y = foundY, w = foundW, h = foundH;
    var newLayout = this.state.layout;

    newLayout.push({
      i: "new" + this.state.newElementsCount,
      x: x,
      y: y,
      w: w,
      h: h
    });

    this.setState({
      newElementsCount: this.state.newElementsCount + 1,
      layout: newLayout
    });
  };

  render() {
    return (
      <div>
        <Dashboard
          layout={this.state.layout}
          add={this.add}
          cols={this.props.cols}
          maxRows={this.props.maxRows}
          onLayoutChange={this.onLayoutChange}
          preventCollision={true}
        />
      </div>
    );
  }
}

const contentDiv = document.getElementById("root");
ReactDOM.render(React.createElement(DashboardContainer), contentDiv);

そして、ダッシュボード コンポーネント:

import React from "react";
import RGL, { WidthProvider } from "react-grid-layout";
const ReactGridLayout = WidthProvider(RGL);

class Dashboard extends React.Component {
  generateDOM() {
    return this.props.layout.map(function(item) {
      return <div key={item.i}>{item.i}</div>;
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.props.add}>Add</button>
        <ReactGridLayout
          rowHeight={30}
          maxRows={this.props.maxRows}
          cols={this.props.cols}
          layout={this.props.layout}
          compactType={null}
          onLayoutChange={this.props.onLayoutChange}
        >
          {this.generateDOM()}
        </ReactGridLayout>
      </div>
    );
  }
}

module.exports = Dashboard;

完全な (ほぼ) 動作するコードは、このコードサンドボックスにあります。

私は React と RGL にまだ慣れていないので、どんな提案も歓迎します!

ありがとうございました