有关组件渲染的反应警告

问题描述:

我正在使用父组件内的子组件。如下图所示,有关组件渲染的反应警告

class Parent extends Component() { 
    getContent() { 
    let arr = [{name: 'abc'},{name: 'bcd'},{name: 'cde'}]; 
    return arr.map(data => <Child name={data.name}/>) 
    } 

    render() { 
    return (
     <div>{this.getContent()}</div> 
    ) 
    } 
} 

上面的代码在警告

阵列中的每个孩子都应该有一个独特的“钥匙”的道具。检查 渲染TableComponent

的方法,我不希望像答案使用子组件唯一键的道具。相反,请澄清为什么反应会给出这种类型的警告,如果我不在这里使用唯一的密钥,那将会是什么缺点。请提供这个原因的例子。

+4

可能的重复[了解React.js中数组子元素的唯一键](https://*.com/questions/28329382/understanding- unique-keys-for-array-children-in-react-js) – poke

+1

请参阅[第二最多投票回答](https://*.com/a/43892905/216074)以获得关于'key'用于什么。 – poke

键帮助React识别哪些项目已更改,添加或删除。应该给数组中的元素赋予元素一个稳定的标识