反应警告：数组或迭代器中的每个子元素都应该有一个唯一的“键”属性。检查App的渲染方法

我得到这个错误，但我定义了一个关键。这是我的App.js，它抱怨。反应警告：数组或迭代器中的每个子元素都应该有一个唯一的“键”属性。检查App的渲染方法

import React from 'react'; 
import Relay from 'react-relay'; 
import AccountTable from './AccountTable'; 

class App extends React.Component { 
    render() { 
    return (
     <div> 
     <h1>Account list</h1> 
      {this.props.viewer.accounts.edges.map(edge => 
      <AccountTable key={edge.node.id} account={edge.node} /> 
     )} 
     </div> 
    ); 
    } 
} 

export default Relay.createContainer(App, { 
    fragments: { 
     viewer:() => Relay.QL` 
      fragment on User { 
       accounts(first: 10) { 
        edges { 
         node { 
          ${AccountTable.getFragment('account')} 
         } 
        } 
       } 
      } 
     `, 
    }, 
});

来源

2016-12-16 LoneWolfPR

bob ross会为你的代码山感到骄傲。但真的，你应该检查你的edge.node.id的唯一性。 – aaaaaa

做我通常的健康检查。上述代码是错误的100％来源吗？是真正独特的ID吗？也许你有几个undefineds/nulls – azium

看看你是否有重复的ID：'console.log（this.props.viewer.accounts.edges.map（edge => edge.node.id））' – sdgluck

纠正这种最简单的方法是将基地起飞地图的索引键：

{this.props.viewer.accounts.edges.map((edge, i) => 
    <AccountTable key={i} account={edge.node} /> 
)}

然后，您不必担心edge.node.id价值如何独特之处。 key只需要在所有AccountTable兄弟姐妹的情况下是唯一的。它不需要是全球唯一的。所以，指数运作良好。

但是，如果您有一个基于对象的稳定ID，那显然会更好。

来源

2016-12-16 18:27:13

根据反应文件：“如果您没有呈现项目的稳定ID，则可以使用项目索引作为最后手段的关键字”。所以，我想确保在我这样做之前没有办法获得一个稳定的ID。在这方面的任何建议，或者这是不可能的，因为我的节点引用一个不同的片段？ – LoneWolfPR

那么，除非你有另一个ID，这可能是你的“最后的手段”，对吧？ –

它肯定可以解决这个问题。我会做更多的挖掘，但是如果我找不到获取对象ID的方法，我会将其标记为解决方案。谢谢！ – LoneWolfPR

反应警告：数组或迭代器中的每个子元素都应该有一个唯一的“键”属性。检查App的渲染方法

回答

相关问题