映射警告时反应唯一键

Posted 2023-03-17

【中文标题】映射警告时反应唯一键

【英文标题】：React unique key when mapping warning

【发布时间】：2018-03-07 09:09:37

【问题描述】：

我对反应还很陌生，我面临着一个我无法解决的问题。这是我的反应组件：

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"
    
  ]

在我看来它应该可以工作，我不明白为什么我仍然会收到这个错误。我真的很想在我的问题上得到一些帮助，如果有人能解释一下这里发生了什么，那就太酷了，因为我真的想了解它是如何工作的。

感谢您的帮助！ :)

【问题讨论】：

您能否检查任何时间点的数据是否为 ​​undefined 或 null

是否有任何答案可以帮助您解决问题？

@spencer.sm 不，但我自己解决了。我重新启动了整个服务器，仍然一样。所以我有点生气，决定关闭我的电脑一个小时。重新启动后，它工作得很好。不知道它是什么，认为有些东西没有正确加载。

【参考方案1】：

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

第一种方法是将键添加到周围的 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】：

将包装器用于渲染每个对象的属性。

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

【参考方案3】：

在您的代码中

<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(key)。我认为出于某种原因，在您的对象数组中，您有一个具有相同键的对象。

这样当你看到 console.log() 结果时。你会知道你的对象中哪里有错误。

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