Запрос Ajax с использованием Fetch in React

Question

Я делаю запрос Ajax в React с использованием Fetch. Запрос работает нормально, но я получаю сообщение об ошибке, хотя я указал уникальный ключ. Вот предупреждение:

Предупреждение: Каждый ребенок в массиве или итераторе должен иметь уникальный «ключ». Проверьте метод рендеринга Table.

Любая идея, почему я получаю эту ошибку?

Мой код:

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

[ОБНОВЛЕНО]

Похоже Реагировать не нравятся мои уникальные идентификаторы для какой-то причине. Я добавил индекс на карту и теперь он работает:

{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, массив объектов «учетных записей» отсутствует свойство «идентификатор», который, вероятно, причина, почему у меня было проблема в первую очередь.

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} />)}