Reactjs react grid layout没有显示我传递给他的布局

我遇到了一个关于库react网格布局的问题，我不知道这是一个bug还是我做得不好。 我提出了一个问题，但我想得越多，这么大的问题被忽视的可能性就越小。 你可以找到我正在经历的一个演示

我想做什么 我想使用react grid布局创建一个仪表板。我正在尝试实现，所以我有一个DashboardContainer组件通过他的状态控制布局，并将此布局传递给props中的仪表板组件

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

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

但这是显示的布局（元素“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);

从“React”导入React；
从“react dom”导入react dom；
从“/Dashboard”导入仪表板；
类DashboardContainer扩展React.Component{
静态defaultProps={
maxRows:8，
科尔斯：12
};
状态={
布局：[
{i:“key0”，x:0，y:0，w:2，h:2}，
{i:“键1”，x:2，y:0，w:3，h:2}，
{i:“键2”，x:2，y:2，w:2，h:2}，
{i:“键3”，x:8，y:0，w:3，h:2}
],
新要素要素要素：0
};
onLayoutChange=l=>{
this.setState（{layout:l}）；
};
添加=（）=>{
//这里我们计算新元素应该放在哪里
变量x=foundX，y=foundY，w=foundW，h=foundH；
var newLayout=this.state.layout；
newLayout.push({
i:“新”+this.state.newelement，
x:x，
y:y，
w:w，
h:h
});
这是我的国家({
NewElementScont:this.state.NewElementScont+1，
布局：新布局
});
};
render（）{
返回(
);
}
}
const contentDiv=document.getElementById（“根”）；
render（React.createElement（仪表板容器），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”导入React；
从“react grid layout”导入RGL，{WidthProvider}；
const ReactGridLayout=WidthProvider（RGL）；
类Dashboard扩展了React.Component{
生成域（）{
返回此.props.layout.map（函数（项）{
返回{item.i}；
});
}
render（）{
返回(
添加
{this.generateDOM（）}
);
}
}
module.exports=仪表板；

完整的（几乎）工作代码可以在下面的列表中找到

我还是一个新的反应和RGL，所以任何建议都欢迎

---

谢谢

如果有人遇到这个问题，我使用了一种您可以找到的解决方法