Reactjs沒有正確呈現信息

Question

我試圖執行一個表單，我可以使用反應刪除特定的輸入。問題是，反應似乎沒有正確渲染信息。這是我的渲染功能：

render: function(){ 
    var inputItems; 
    if (this.state.inputs){ 
     inputItems = this.state.inputs.map(function(input){ 
     console.log(input) 
     return (
     <Input 
      input={input} 
      onDestroy={this.destroy.bind(this, input)} 
      onEdit={this.edit.bind(this, input)} 
      editing={this.state.editing === input.id} 
      onCancel={this.cancel} /> 
    ); 
    }, this); 
    } 

(...) 
// this isn't the actual render return 
return {inputItems} 

和我摧毀功能：通過<a href="#" onClick={this.props.onDestroy}>(Remove)</a>

destroy: function (input) { 
    var newInputs = this.state.inputs.filter(function (candidate) { 
    return candidate.id !== input.id; 
    }); 

    this.setState({ 
    inputs: newInputs 
    }); 
}, 

實際破壞功能獲取調用通過一個子組件。有趣的是，當我在控制檯登錄我的輸入時，如在渲染函數中看到的那樣，顯示了正確的輸入 - 我稱之爲銷燬函數的輸入消失了。但不正確的輸入被渲染 - 它總是最後一個消失，而不是我稱之爲破壞函數的那個​​。因此，例如，我將最初記錄：

First Name 
Last Name 
Email 

並在Last Name上調用destroy函數。在執行console.log將顯示：

First Name 
Email 

但實際呈現的信息將顯示：

First Name 
Last Name 

謝謝！

Answer 1

想通了。與React兒童和解有關。在<Input>標記中添加了一個key={input.id}，它可以工作。

有關兒童和解和動態兒童的更多信息。 http://facebook.github.io/react/docs/multiple-components.html