정보가 올바르게 렌더링되지 않음

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

소멸 실제 함수가 호출지고 있습니다. 흥미로운 점은 렌더링 함수에서 볼 수 있듯이 입력을 로그 할 때 올바른 입력이 표시된다는 것입니다. 즉, destroy 함수를 호출 한 입력이 사라졌습니다. 그러나 잘못된 입력은 렌더링됩니다. 항상 사라지는 마지막 함수입니다. 파괴 함수를 호출 한 것이 아닙니다. 예를 들어, 처음에 로그 할 내용은 다음과 같습니다.

First Name 
Last Name 
Email 

그리고성에 대해 destroy 함수를 호출합니다. 을 console.log가 표시됩니다 :

First Name 
Email 

하지만 실제 렌더링 정보가 표시됩니다 :

First Name 
Last Name 

감사합니다!

Answer 1

알아 냈어. 반응 자녀 화해와 관련이 있습니다. <Input> 태그에 key={input.id}을 추가하면 작동합니다.

아동 화해와 역동적 인 자녀에 대한 자세한 내용은 여기를 참조하십시오. http://facebook.github.io/react/docs/multiple-components.html