reactjs：没有键分配警告，但仅适用于第一次迭代

Question

我有3个组成部分：

Main
  -- adItem
     -- Offerslist
        --- offers (just li's, not a comp)

 //On the main comp containing state I add the offer and I pass the function down as a prop:

  _addOffer: function(offerData) {
    var timestamp = (new Date()).getTime();

    // add offer to item
    this.state.advitems[offerData.itemId].offers['offer-id' + timestamp] = offerData;
    this.setState({
      advitems: this.state.advitems
    });   
  },


/* 
  AdItem  
*/

var AdItem = React.createClass({
  _addOffer: function(event) { 
    var timestamp = (new Date()).getTime();
    var offerData = {
      offerId: 'offer-' + timestamp,
      itemId: this.props.index,
      price: this.refs.offerprice.value
    };
  },
  render : function() {
       //some code to hide and show with css classes
       {renderOffers}
     )
    }
});

var Offerslist = React.createClass({
  _renderOffers: function(key) {
    var details = this.props[key];
    return (
      <li className="offer-of-item">
        &euro; {details.price}
        <a className="remove-offer" onClick={this._removeOffer}>X</a>
      </li>
    )
  },
  render : function() {
    return (
      <ol className="list-of-offers-per-item">
        {Object.keys(this.props).map(this._renderOffers)}
      </ol>
    )
  }
});

AdItem可以包含多个优惠。当我输入第一个报价时，我收到警告，它应该包含一个唯一的密钥。我查了一下，它有一个独特的钥匙。添加第二个时，我没有收到警告。但我不确定它是否只是停止警告我，或者它是以某种方式纠正的。

我在这里做错了吗？我不确定接下来要检查什么。

Answer 1

当您迭代数组并动态创建元素时，您还必须向所述元素添加key道具：

{Object.keys(this.props).map(this._renderOffers)}

this._renderOffers必须返回具有相对于彼此唯一的键的元素。简单的方法是简单地使用数组中的索引，但更好的方法是确保React知道如何正确地告诉另一个元素是另一个元素，如果你知道它是＆＃39;独一无二：

_renderOffers: function(key) {
  var details = this.props[key];
  return (
    /* Add a key prop here. E.g. details.itemId */
    <li key={details.itemId} className="offer-of-item">
      &euro; {details.price}
      <a className="remove-offer" onClick={this._removeOffer}>X</a>
    </li>
  )
},

这确保了当您添加或删除项目或更改数据时，React只会操纵相应的DOM元素，而不是重绘整个列表，或者可能会更改错误的元素。