React：在映射自定义组件时，数组或迭代器中的每个子项都应具有唯一的“键”道具

Question

我有一个自定义的 material-ui 组件，定义如下。

import React, { PropTypes } from 'react';
import Paper from 'material-ui/lib/paper';

function PaperBox (props) {
  return (
    <Paper className={props.layout}>
      <div className="row center-xs">
        <p>{props.box.title}</p>
      </div>
      <div className="row center-xs">
        <p className="col-xs-10">
          {props.box.text}
        </p>
      </div>
    </Paper>
  );
}

PaperBox.propTypes = {
  box: PropTypes.shape({
    title: PropTypes.string.isRequired,
    text: PropTypes.any.isRequired
  }).isRequired,

  layout: PropTypes.string.isRequired
};

export default PaperBox;

在另一个文件中，我有一个父组件，它将一组文本对象映射到上述组件，如下所示

import React from 'react';
import PaperBox from '../shared/PaperBox/PaperBox';

const layout = 'col-md-3 col-xs-8';

function DetailContent (props) {
  return (
    <div className="row around-xs">
      {props.boxes.map(box => <PaperBox key={box.title} box={box} layout={layout} />)}
    </div>
  );
}

export default DetailContent;

你可以想象，“props.boxes”是一个文本对象数组

const boxes = [
  {
    title: 'one',
    text: 'I am a bunch of text'
  },
  {
    title: 'two',
    text: 'I am also a bunch of text'
  },
];

对我来说非常奇怪的是，虽然我在 PaperBox 组件中添加了 key 属性，但它仍然会打印 Warning: E​​ach child in an array or iterator should have a unique "key"道具。 在控制台中。有解决办法吗？

非常感谢

Answer 1

使用数组索引作为每个孩子的唯一键：

props.boxes.map((box, i) => <PaperBox key={i} box={box} layout={layout} />)