Spleiß() Methode funktioniert nicht

Question

Ich habe ein Problem mit Spleiß() - Methode in meiner React.js App.

So, this is an example app. Löschen funktioniert jetzt nicht. Was ist hier falsch? Ein Teil des Codes:

class CardList extends React.Component { 
    static propTypes = { 
    students: React.PropTypes.array.isRequired 
    }; 
    // ADD DELETE FUNCTION 
    deletePerson(person) { 
    this.props.students.splice(this.props.students.indexOf(person), 1) 
    this.setState() 
    } 
    render() { 
    let that = this 
    return <div id='list'> 
     {this.props.students.map((person) => { 
     return <Card 
      onClick={that.deletePerson.bind(null, person)} 
      name={person.name}> 
     </Card> 
     })} 
    </div> 
    } 
} 

class Card extends React.Component { 
    render() { 
    return <div className='card'> 
     <p>{this.props.name}</p> 
     {/* ADD DELETE BUTTON */} 
     <button onClick={this.props.onClick}>Delete</button> 
    </div> 
    } 
} 

http://codepen.io/azat-io/pen/Vaxyjv

Answer 1

Ihr Problem ist, dass, wenn Sie

onClick={that.deletePerson.bind(null, person)} 

Sie this Wert null binden nennen. Also innerhalb Ihrer deletePerson Funktion this ist null anstelle der eigentlichen Komponente. Sie sollten es

onClick={that.deletePerson.bind(this, person)} 

ändern und alles wäre wie erwartet =)

Answer 2

den Bindewert this ändern, wird auf jeden Fall um den Anruf zu this.setState() verursachen und damit zu arbeiten Auslösen der Wieder machen, aber ich stark empfehlen gegen den Ansatz, den Sie genommen haben.

Requisiten sollen unveränderlich sein. Verwenden Sie stattdessen den internen Status und ersetzen Sie sie durch neue Werte, anstatt sie zu mutieren. Um dies zu tun, stellen Sie den Zustand Ihrer Komponente im Konstruktor von etwas zu tun, wie:

constructor(props) { 
    super(props) 
    this.state = { 
     students: ...this.props.students 
    } 
} 

Und jetzt, wenn Sie eine Person löschen müssen:

deletePerson(person) { 
    // notice the use of slice vs splice 
    var newStudents = this.props.students.slice(this.props.students.indexOf(person), 1) 
    this.setState({ students: newStudents }) 
} 

Und verwenden Sie schließlich this.state.students in Ihrer Render-Methode stattdessen.

Der Grund dafür ist, dass props direkt von der übergeordneten Container-Komponente übergeben werden, so dass sie ändern würde nicht wirklich Sinn machen. Um mehr Sinn für meinen eigenen Code zu bekommen, tendiere ich dazu, die Prop-Datei mit dem Namen initialStudents zu übergeben und meinen Status auf students: ...initialStudents zu setzen, um sicherzustellen, dass ich zwischen meiner Prop-Variable und meiner Statusvariablen unterscheiden kann.