React 경고 : 배열이나 반복기의 각 자식에는 고유 한 "키"소품이 있어야합니다. `App`의 렌더링 방법을 확인하십시오.

Question

오류가 발생했습니다.하지만 키를 정의하고 있습니다. 여기 내 App.js에 대해 불평하고 있습니다.

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

그런 다음, 당신은 edge.node.id의 값이 얼마나 독특한에 대해 걱정할 필요가 없습니다 :

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')} 
         } 
        } 
       } 
      } 
     `, 
    }, 
}); 

Answer 1

이 문제를 해결하는 가장 쉬운 방법은 맵의 인덱스 off 키를 기반으로하는 것입니다. key은 모든 AccountTable 형제의 맥락에서만 고유해야합니다. 전 세계적으로 고유 할 필요는 없습니다. 따라서 색인이 잘 작동합니다. 당신이 개체의 해제를 기반으로 안정적인 ID가있는 경우

그러나, 그것은 분명 더 낫다.