React：映射自定义组件时，数组或迭代器中的每个 child 都应该有一个唯一的 "key" 道具

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;

在另一个文件中，我有一个 parent 组件，它将文本数组 objects 映射到 above-mentioned 组件，如下所示

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"是一个文本数组objects

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

对我来说非常奇怪的是，尽管我向 PaperBox 组件添加了 key 属性，它仍然打印 Warning: Each child in数组或迭代器应该在控制台中具有唯一的 "key" prop.。有解决办法吗？

非常感谢

Answer 1

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

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

React：映射自定义组件时，数组或迭代器中的每个 child 都应该有一个唯一的 "key" 道具

React: Each child in an array or iterator should have a unique "key" prop when Mapping custom components

mapping

key

reactjs