在React中使用Fetch的Ajax请求

Question

我正在使用Fetch在React中做Ajax请求。请求工作正常，但我得到一个错误，即使我指定了一个唯一的键。下面是警告信息:

警告:数组或迭代器中的每一个子元素都应该有一个唯一的"key"道具。检查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"
   }
]

(更新)

看起来React不喜欢我的唯一id出于某种原因。我已经添加了一个索引映射，它现在工作:

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