React动态渲染Row与Col时key报错及奇数字段宽度异常问题

问题1 ：key属性报错原因及解决 #

你只给了字段项的div加了key，但每次满行时插入的<div className="w-100"></div>没有添加唯一key，React遍历columns数组渲染时就会检测到缺少key的子元素，抛出警告。
给这个换行用的div补唯一key即可，比如用key={wrap_${idx}}。

问题2：奇数个字段最后一列占满整行的解决 #

你可以先计算需要补的空占位列数量：
计算公式：需要补充的空列数 = (每行列数 - 现有字段总数 % 每行列数) % 每行列数
如果现有字段总数刚好是每行列数的倍数，计算出来的补位数量为0，不需要额外补列；如果有余数，就补对应数量的空col-sm节点，保证每行的列数一致，所有输入框宽度统一。

修改后完整代码 #

export const RenderDetailRow = props => {
  const columns = [];
  const perRowCount = props.display[0].number;
  const contentTotal = props.content.length;
  // 计算需要补的空列数
  const emptyColCount = (perRowCount - contentTotal % perRowCount) % perRowCount;

  props.content.forEach((content, idx) => {
    columns.push(
      <div className="col-sm py-3" key={`item_${idx}`}>
        <b>{content.name + ': '}</b>
        <Input type="text" name={content.name} id={content.id} readOnly value={content.value} />
      </div>
    );

    if ((idx + 1) % perRowCount === 0) {
      // 给换行元素补key
      columns.push(<div className="w-100" key={`wrap_${idx}`}></div>);
    }
  });

  // 补空列
  for (let i = 0; i < emptyColCount; i++) {
    columns.push(<div className="col-sm py-3" key={`empty_${i}`}></div>);
  }

  return (
    <div className="row" style={{ margin: 30 }}>
      {columns}
    </div>
  );
};

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