如何从React中的数组状态中删除元素？

Question

我有一个名为Rooms的根分支与firebase中的数组，以及名为rooms（数组）的应用中的状态。当用户输入新房间名称并按下提交时，我能够使它成为这样，它被添加到Rooms对象的末尾。

我想实现一个删除方法，所以当旁边的房间名称x按钮用户点击，它就会从国家和火力删除元素，但我没有成功实现它。

我的起点是从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> 

当我修改li包括handleRemove，它显示了这个错误：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> 
) 
}) 

“丽”是的function(room, index)的范围，本this被点到全球在这种情况下window对象，这就是为什么道具是不是this，您可以使用ES6脂肪箭头

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

或老派方法

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