Question

我正在使用Fetch在React中执行Ajax请求。请求工作正常，但即使我指定了一个唯一的密钥，我也收到错误。这是警告信息：

警告：数组或迭代器中的每个子节点都应该有一个唯一的＆＃34;键＆＃34;支柱。检查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中，对象数组＆＃34; accounts＆＃34;缺少财产＆＃34; id＆＃34;，这可能是我首先遇到这个问题的原因。

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

在React中使用Fetch的Ajax请求

1 个答案: