Splice（）メソッドが動作しません

Question

React.jsアプリケーションのsplice（）メソッドに問題があります。

したがって、this is an example appです。削除は今動作しません。ここで何が間違っていますか？コードの一部：

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

あなたの問題は、あなたが

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

を呼び出すときは、nullにthis値を結合することです。したがって、deletePersonファンクションthisは実際のコンポーネントの代わりにnullです。私は強くしかし、これ再レンダリングトリガ、間違いなく動作するようにthis.setState()への呼び出しが発生しますthisにバインド値を変更する）

Answer 2

=あなたは

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

に変更する必要があり、すべてが期待どおりに動作しますあなたが取ったアプローチに対しては推奨します。

小道具は不変であるはずです。代わりに、内部状態を使用して、それらを変更するのではなく新しい値で置き換えます。これを行うには、同じような何かを行うことで、コンストラクタであなたのコンポーネントの状態を設定します。

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

そして今、あなたは人を削除する必要がある場合：あなたのrenderメソッドでは、最終的

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

そして使用this.state.studentsを代わりに。

これは、propsが親コンテナコンポーネントから直接渡されるため、それらを変更することが実際には意味をなさないという理由があります。私自身のコードをもっと理解するために、initialStudentsという小道具を渡し、私の小屋の変数と私の状態変数を区別するために私の状態をstudents: ...initialStudentsに設定する傾向があります。