映射警告时反应唯一键

时间:2017-09-26 08:29:53

标签: node.js reactjs key mapping ejs

我很反应,我面临一个我无法解决的问题。这是我的反应组件:

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的呈现方法。看到   HERE-FB-URL-I-REMOVED了解更多信息。       在ContestPreview中(由App创建)       在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"
    }
  ]
}

在我的观点中它应该有效,我无法理解为什么我仍然会得到这个错误。我真的希望得到一些关于我的问题的帮助,如果有人能解释我在这里发生的事情真的很酷,因为我真的想了解它是如何工作的。

感谢您的帮助! :)

3 个答案:

答案 0 :(得分:0)

将包装器放到渲染每个对象的属性上。

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

答案 1 :(得分:0)

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

第一种方法是将密钥添加到周围的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>
}

答案 2 :(得分:-1)

在你的代码中

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

这将控制您在地图中呈现的每个组件的id(键)。我认为由于某种原因,在你的对象数组中你有一个具有相同键的对象。

这样当你看到console.log()结果时。您将知道对象中的哪个位置存在错误。

我希望这可以帮助您调试错误。