react-grid-layout报错：Layout属性需为对象却接收数组如何解决？

问题原因 #

你使用的是react-grid-layout的响应式组件Responsive，该组件要求layouts属性为以响应式断点为键、对应断点布局数组为值的对象，你直接传入了一维布局数组，因此触发类型校验报错。

解决方案 #

提供两种可选修复方案：

方案1：不需要响应式布局，改用基础GridLayout组件 #

修改代码如下：

import React from "react";
// 引入基础GridLayout而非Responsive
import { GridLayout, WidthProvider } from "react-grid-layout";
import NewvsReturnVisitors from "./newvsreturnvisitors";
import ReactDOM from "react-dom";
import "./styles/styles.css";

const e = React.createElement;
const Grid = WidthProvider(GridLayout);

function App() {
  // 布局数组可以保留原有结构
  const layout = [
    { i: "1", x: 0, y: 0, w: 2, h: 1, minW: 2, minH: 1 },
    // 注意：现有组件仅渲染了key=1的元素，无用的布局项建议删除
    // { i: "2", x: 10, y: 0, w: 2, h: 1, minW: 2, minH: 1 }
  ];

  return (
    {/* 基础组件的布局属性为单数layout，直接传数组即可 */}
    <Grid
      layout={layout}
      cols={12} // 可自定义总列数
      rowHeight={30} // 可自定义行高
    >
      <div key="1">
        <NewvsReturnVisitors />
      </div>
    </Grid>
  );
}

ReactDOM.render(e(App), document.getElementById("root"));

方案2：保留响应式能力，调整layouts结构为符合要求的对象格式 #

修改代码如下：

import React from "react";
import { Responsive, WidthProvider } from "react-grid-layout";
import NewvsReturnVisitors from "./newvsreturnvisitors";
import ReactDOM from "react-dom";
import "./styles/styles.css";

const e = React.createElement;
const ResponsiveGridLayout = WidthProvider(Responsive);

function App() {
  // 调整layouts为断点映射对象，可自定义断点及对应布局
  const layouts = {
    lg: [ // 大屏幕断点布局
      { i: "1", x: 0, y: 0, w: 2, h: 1, minW: 2, minH: 1 },
    ],
    md: [ // 中等屏幕断点布局
      { i: "1", x: 0, y: 0, w: 1, h: 1, minW: 1, minH: 1 },
    ],
    sm: [ // 小屏幕断点布局
      { i: "1", x: 0, y: 0, w: 1, h: 1, minW: 1, minH: 1 },
    ]
  };

  return (
    <ResponsiveGridLayout
      layouts={layouts}
      breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}} // 自定义断点阈值
      cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}} // 各断点下总列数
    >
      <div key="1">
        <NewvsReturnVisitors />
      </div>
    </ResponsiveGridLayout>
  );
}

ReactDOM.render(e(App), document.getElementById("root"));

内容的提问来源于stack exchange，提问作者yongchang