node.js - 映射警告时 react 唯一键

我是一个非常新的反应者，我面临一个我无法解决的问题。这是我的react组件：

import React from 'react';
import Header from './Header';
import ContestPreview from './ContestPreview';

class App extends React.Component {

    state = {
        pageHeader: 'Naming Contests',
        whatever: 'test'
    };

    render() {
        return (
            <div className="App">
                <Header message={this.state.pageHeader} />
                <div>
                    {this.props.contests.map(contest =>
                        <ContestPreview key={contest.id} {...contest} />
                    )}
                </div>
            </div>
        );
    }
}

export default App;

此代码给我以下警告：


  警告：数组或迭代器中的每个子代均应具有唯一的“键”
  支柱。检查App的渲染方法。看到
  有关更多信息，请点击此处FB-URL-I-已删除。
      在ContestPreview中（由App创建）
      在应用程式中


我完全理解此错误的含义。我知道在循环通过数组时，数组的每个元素都应具有唯一的键。我不明白为什么会出现错误，因为在我的选择中，密钥应该用<ContestPreview key={contest.id} {...contest} />定义... ... key={contest.id}还不够吗？

这是我的比赛数据：

{
  "contests": [
    {
      "id": 1,
      "categoryName": "Business/Company",
      "contestName": "Cognitive Building Bricks"
    },
    {
      "id": 2,
      "categoryName": "Magazine/Newsletter",
      "contestName": "Educating people about sustainable food production"
    },
    {
      "id": 3,
      "categoryName": "Software Component",
      "contestName": "Big Data Analytics for Cash Circulation"
    },
    {
      "id": 4,
      "categoryName": "Website",
      "contestName": "Free programming books"
    }
  ]
}

在我的选择中，它应该起作用，我不明白为什么我仍然会收到此错误。我真的很想获得有关我的问题的帮助，如果有人可以向我解释一下这里发生的事情，那真是太酷了，因为我真的试图了解它的工作原理。

谢谢您的帮助！ :)

最佳答案

我可以想到两种解决方法...

第一种方法是将键添加到周围的div中，而不是直接在ContestPreview元素上。

<div>
  {this.props.contests.map(contest =>
    <div key={contest.id}><ContestPreview {...contest} /></div>
  )}
</div>

第二种方法是修改ContestPreview，使其实际上使用key道具。

render(){
  <div key={this.props.key}>
  ...
  </div>
}

关于node.js - 映射警告时 react 唯一键，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46421445/