Javascript 没有正确呈现信息

我正在尝试实现一个表单，在这个表单中，我可以使用React删除特定的输入。问题是，react似乎没有正确呈现信息。这是我的渲染函数：

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}

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

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

实际销毁函数是通过子组件通过

调用的。有趣的是，当我在控制台上记录输入时，正如在render函数中看到的那样，正确的输入被显示出来了——我调用destroy函数的输入消失了。但是不正确的输入会被渲染-它总是最后一个消失的输入，而不是我调用destroy函数的输入。例如，我将首先记录：

First Name
Last Name
Email

并以姓氏调用destroy函数。控制台日志将显示：

First Name
Email

First Name
Last Name

但实际呈现的信息将显示：

First Name
Email

First Name
Last Name

---

谢谢

找到了答案。与儿童和解有关。在

标记中添加了一个

key={input.id}

，它就可以工作了

更多信息请参见儿童和解和动态儿童。

---

请注意，如果使用受控组件（），表单将始终与模型数据匹配，即使忘记使用键，也不会出现此问题。