javascript - Reactjs が情報を正しくレンダリングしない

Question

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
  });
},

実際の破棄関数は、 を介して子コンポーネントを介して呼び出されます<a href="#" onClick={this.props.onDestroy}>(Remove)</a>。興味深いのは、render 関数で見られるように、入力をコンソール ログに記録すると、正しい入力が表示されることです。destroy 関数を呼び出した入力はなくなっています。しかし、間違った入力がレンダリングされます - 消えるのは常に最後の入力であり、破棄関数を呼び出した入力ではありません。たとえば、最初にログに記録します。

First Name
Last Name
Email

Last Name に対して destroy 関数を呼び出します。には次のconsole.logように表示されます。

First Name
Email

ただし、実際にレンダリングされた情報は次のように表示されます。

First Name
Last Name

ありがとう！