ReactGridLayout出现Duplicate child key "0"警告如何解决

错误原因 #

你在ReactGridLayout组件下同时渲染了items和charts两个数组的元素，React要求同一个父组件下的所有直接子元素的key必须全局唯一，而你现在两个数组初始化时生成的i属性都是从"0"开始递增的字符串，导致出现了重复的key="0"、key="1"等情况，触发了警告。

修复步骤 #

1. 给两个数组的key加不同的前缀做区分，比如普通元素前缀加item_，图表元素前缀加chart_，首先修改constructor里的初始化逻辑：

// items初始化加前缀
items: [0, 1, 2, 3, 4].map(function (i, key, list) {
  return {
    i: `item_${i}`,
    x: i * 2,
    y: 0,
    w: 2,
    h: 2,
    add: i === list.length - 1
  };
}),
// charts初始化加前缀
charts: [0, 1].map(function (i, key, list) {
  return {
    i: `chart_${i}`,
    x: i * 2,
    y: 0,
    w: 2,
    h: 2,
    add: i === list.length - 1
  };
}),

2. 对应修改新增元素时的i生成逻辑：

// onAddItem方法内修改i的生成规则
i: `item_n${this.state.newCounter}`,

// onChartItem方法内修改i的生成规则
i: `chart_n${this.state.chartCounter}`,

3. 补充修复删除逻辑的遗漏：当前的onRemoveItem仅处理了普通元素数组的删除，点击图表的删除按钮不会生效，需改成同时匹配两个数组：

onRemoveItem(i) {
  console.log("removing", i);
  this.setState({ 
    items: _.reject(this.state.items, { i: i }),
    charts: _.reject(this.state.charts, { i: i })
  });
}

修改完成后两个数组的key就完全不会重复，控制台警告会消失。

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