Question

这就是我的渲染列表的样子：

renderEvent(){
return this.props.eventList.map(listedEvent=>
    <CardSection key={listedEvent._id}>

      <EventListItem>
      {listedEvent.eventName}
      </EventListItem>

      <DeleteButton
      onClick={this.deleteEvent(listedEvent._id)}
      key={listedEvent._id}
      />

    </CardSection>
  );
    }

这里是整个列表的呈现

render(){

if (this.props.eventList !== undefined) {
  return(
        <Card>
          {this.renderEvent()}
        </Card>
        )
}else{
  return(
        <View>
        <Spinner/>
        </View>
        )
      }
    }
  }

到目前为止一切顺利，列表和删除按钮正确显示，但当我尝试删除一行时，它会解决所有问题。我创建了我的事件处理程序，现在只记录传递的id。

deleteEvent(eventID){
console.log(eventID)
}

然而，在调用时，它会记录列表中的所有_ids。我究竟做错了什么？如何确保我点击列表项的单个ID？我点击了？谢谢！

Answer 1

问题在于，您不是将deleteEvent函数传递给正在执行它的onClick道具。这会导致在渲染时删除每个项目的事件。

您可以通过更改此内容对此进行排序，

onPress={this.deleteEvent(listedEvent._id)}

到这个

onPress={() => this.deleteEvent(listedEvent._id)}

这也可以确保deleteEvent与this绑定。

如何从React Native中的列表中删除单个项目？

1 个答案: