反應警告：數組或迭代器中的每個子元素都應該有一個唯一的「鍵」屬性。檢查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的渲染方法

回答

相關問題