Question

React v15.1

我正在创建一个包含可变行数的表，具体取决于通过props提供的数据。这就是我的位置（并且工作正常）：

getRows = () => {
  const rows = [];

  for (const col in this.props.tableRows) {
    if ({}.hasOwnProperty.call(this.props.tableRows, col)) {
        rows.push(React.cloneElement(this.props.tableRows[col], {}));
    }
  }
  return rows;
}

我正在努力使控制台警告消失。这个旧的最爱出现在Each child in an array or iterator should have a unique "key" prop. Check the render method of 'TableData'.

将一个键添加到我推送到空数组的克隆元素的最佳方法是什么？

OR 有更好的方法来处理动态生成的表行上的数据吗？

这是我在很多地方使用的联系信息的上传对话框。它成功地按预期执行，只需添加一个键......或者使其更好。

Answer 1

使用.map函数并渲染JSX可能更有意义，因此您可以轻松地为每个表行指定一个键。

function getRows() {
    const {tableRows} = this.props;

    return tableRows.map((row, index) =>
        <tr key={index}>
            // whatever else you wanted to add inside each row
        </tr>
    );
}

这主要是对您尝试做的事情的猜测 - 如果它不适合您，请发布更详细地描述您的问题的评论，我可以编辑此答案以提供更好的解决方案你。

Answer 2

@ medet-tleukabiluly有正确的答案：

keyed_items = items.map((item, key) => React.cloneElement(item, {key}))

只要每个项目都是一个元素（而不仅仅是一个字符串）。

React - 如何添加＆＃34; key＆＃34;推送到数组时

2 个答案: