Fetch in Reactを使用したAjaxリクエスト

Question

Fetchを使用してReactでAjaxリクエストを行っています。要求は正常に動作していますが、一意のキーを指定してもエラーが発生します。警告メッセージは次のとおりです。

警告：配列またはイテレータの各子には、一意の「キー」小文字が必要です。レンダリング方法がTableであることを確認します。

なぜこのエラーが発生するのでしょうか？

マイコード：リアクト何らかの理由で、私の固有のIDを好きではないよう

let Table = React.createClass({ 
    getInitialState: function(){ 
     return { 
      accounts: [{ 
       "product": "Fixed Saver", 
       "interestRate": 2.20, 
       "minimumDeposit": 500, 
       "interestType": "Fixed" 
      }] 
     } 
    }, 
    componentDidMount: function(){ 
     fetch('http://localhost/table/json/accounts.json') 
      .then(response => { 
       return response.json() 
      }) 
      .then(json => { 
       this.setState({accounts: json}) 
      }); 
    }, 
    render: function(){ 
     return (
      <div className="container"> 
       <ul className="header clearfix"> 
        <li>Product</li> 
        <li>Interest rate</li> 
        <li>Minimum deposit</li> 
        <li>Interest type</li> 
       </ul> 

       {this.state.accounts.map(account => { 
       return (
        <div className="account clearfix"> 
         <div key={account.id}>{account.product}</div> 
         <div>{account.interestRate} %</div> 
         <div>£ {account.minimumDeposit}</div> 
         <div>{account.interestType}</div> 
        </div> 
        ) 
       })} 
      </div> 
     ) 
    } 
}); 

let App = React.createClass({ 
    render: function(){ 
     return(
      <Table /> 
     ); 
    } 
}); 

ReactDOM.render(<App />, document.getElementById('table')); 

JSONファイル

[ 
    { 
     "id": 1, 
     "product": "Fixed Saver", 
     "interestRate": 2.20, 
     "minimumDeposit": 500, 
     "interestType": "Fixed" 
    }, 
    { 
     "id": 2, 
     "product": "Fixed Saver", 
     "interestRate": 1.50, 
     "minimumDeposit": 0, 
     "interestType": "Tracker" 
    }, 
    { 
     "id": 3, 
     "product": "Offset Saver", 
     "interestRate": 1.8, 
     "minimumDeposit": 1000, 
     "interestType": "Fixed" 
    } 
] 

[UPDATED]

が見えます。私はマップするためにインデックスを追加しましたし、それが動作するようになりました：

{this.state.accounts.map((account,i) => { 
    return (
     <div className="account clearfix" key={i}> 
      <div key={account.id}>{account.product}</div> 
      <div>{account.interestRate} %</div> 
      <div>£ {account.minimumDeposit}</div> 
      <div>{account.interestType}</div> 
     </div> 
    ) 
})} 

はまたgetInitialState、「アカウント」オブジェクトの配列で、おそらく私が持っていた理由であるプロパティ「ID」を、欠落していることを実現しました最初の問題。

Answer 1

アカウント情報のコンポーネントを作成します。

const Account = ({ account }) => (
    <div className="account clearfix"> 
    <div key={account.id}>{account.product}</div> 
    <div>{account.interestRate} %</div> 
    <div>£ {account.minimumDeposit}</div> 
    <div>{account.interestType}</div> 
    </div> 
); 

は、このようなあなたのデータ配列をマッピング：

{this.state.accounts.map(account => <Account key={account.id} account={account} />)}