ReactGridLayout报错children[0].x must be a number问题求解

错误根因 #

报错ReactGridLayout.children[0].x must be a number的核心原因是新增Grid项时，对应的布局配置项里x属性不是数字类型，存在undefined、null、字符串或者NaN这类非法值。

修复步骤 #

1. 检查新增项的布局属性初始化逻辑，确保x/y/w/h四个必填属性均为数字类型，且没有赋值异常
2. 计算新项的x值时添加兜底逻辑，避免从已有布局取值时出现未定义的情况

错误代码示例 #

const addItem = () => {
  const newItem = {
    i: String(layout.length),
    x: layout.at(-1)?.x + 2, // 布局为空时x为undefined，直接报错
    y: 0,
    w: '2', // w为字符串类型，同样会触发同类型错误
    h: 2
  }
  setLayout([...layout, newItem])
}

正确代码示例 #

const addItem = () => {
  // 计算已有布局的最大x值，布局为空时兜底为0，确保是数字类型
  const maxX = layout.length ? Math.max(...layout.map(item => item.x)) : 0
  const newItem = {
    i: String(layout.length),
    // x值计算后可根据容器列宽做取模处理实现自动换行，数字类型无异常
    x: (maxX + 2) % 12,
    y: 0,
    w: 2,
    h: 2
  }
  setLayout([...layout, newItem])
}

额外检查点 #

• 确保ReactGridLayout组件的layout属性传入的配置数组，每一项的i属性和对应Grid子元素的key完全一一对应
• 不要将布局配置属性塞到Grid子组件的props里传递，所有布局配置统一放在layout数组中管理

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