Reactの配列状態から要素を削除するには？

Question

私はRoomsという名前のルートブランチと、rooms（配列）という名前のアプリ内の状態を持つfirebaseの配列を持っています。ユーザーが新しい部屋名を入力してsubmitを押すと、Roomsオブジェクトの最後に追加されます。

私は部屋名の横にxボタンをユーザーがクリックすると、それは国家からとfirebaseからその要素を削除しますが、私はそれを実装する一切の成功を持っていないときにdeleteメソッドを実装したかったです。

私の出発点はSO similarly titledのスレッドです。私は、動作するコンポーネント<li>にコードを実装していません。これは私が持っているものです。

Chatroom.js

handleRemove(index) { 
    var array = this.state.rooms.slice(); 
    array.splice(index, 1); 
    this.setState({ 
     rooms: array 
    }) 
    } 
    ... 
    render(){ 
    <div><DisplayChatrooms rooms={this.state.rooms} handleRemove={this.handleRemove.bind(this)} /></div> 

DisplayChatrooms.js

class DisplayChatrooms extends React.Component{ 
    render(){ 
    console.log('handleRemove: ', this.props.handleRemove); //this prints out the handleRemove function just fine 
    var rooms = this.props.rooms.map(function(room, index){ 
     return (
     <li key={index}>{room} <a href="#">x</a></li> 
    ) 
    }) 
    return(
     <div> 
     <ul> 
      {rooms} 
     </ul> 
     </div> 

私はhandleRemoveを含めるようにliを変更すると、それはこのエラーを示していますUncaught TypeError: Cannot read property 'props' of undefined。

<li key={index}>{room} <a href="#" onClick={this.props.handleRemove}>x</a></li> 

xをクリックしたときにその要素を削除する方法を実装するにはどうすればよいですか？

Answer 1

this.props.rooms.map(function(room, index){ 
    return (
    <li key={index}>{room} <a href="#">x</a></li> 
) 
}) 

「李」、this、この場合のグローバルwindowオブジェクトへのポイントであることを、function(room, index)の範囲にある小道具がthisでない理由、あなたは

this.props.rooms.map((room, index) => {}) 

ES6脂肪の矢印を使用することができますthatsの

または古い学校の方法

var self = this; 
this.props.rooms.map(function() { self.props.handleRemove })