react-grid-layout没有显示我通过他的布局

Question

我的库react-grid-layout遇到问题，我不知道这是一个bug还是做得不好。 我打开了一个问题here，但我对它的思考越多，那么大的问题就没有被注意到的可能性就越小。 您可以找到有关我所经历的here

的演示。

我要做什么

我想使用react-grid-layout创建一个仪表板。我正在尝试实现container pattern，所以我有一个DashboardContainer组件，通过他的状态 控制布局，并将该布局向下传递到道具中的Dashboard组件。

我遇到的问题

为初始状态正确放置了元素，但是当我添加项目时，所添加元素的x，y，w和h不正确。 第一次添加时应为（5,0,2,2），最终将其放置在（0,4,1,1）上 我看到如果没有正确的键，则可以将元素重新定义为宽度和高度的1，但是我认为我的键是正确的。

示例：此布局传递到仪表板 layout data

但这是显示的布局（元素“ new0”不对应） displayed layout

我的代码

这是我的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;

完整的（几乎）工作代码可以在此codesandbox

中找到

我对React和RGL还是很陌生，因此欢迎提出任何建议！

谢谢