在React中使用Fetch进行Ajax请求

Question

我正在使用Fetch在React中执行Ajax请求。 该请求运行正常，但是即使指定了唯一键，也出现了错误。 这是警告消息：

警告：数组或迭代器中的每个子代都应具有唯一的“键”道具。 检查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} />)}