Question

我有一个flatList，我试图用flatList中的按钮删除一个项目。我创建了一个名为deleteTask的函数。我收到一条错误消息，指出“_this2.deleteTask不是函数。”

我将不胜感激任何帮助。我的代码如下：

在TaskList.js中：

class TaskList extends React.Component {
static navigationOptions = {
title: 'My Task List',
};
constructor(props) {
super(props)
this.state = {
taskList: [
new Task("Feed cat")
.setPriority(4)
.addTag("home")
.addTag("pet")
.setDeadlineRandomly(),
new Task("Buy milk")
.setPriority(2)
.addTag("errand")
.addTag("grocery")
.setDeadlineRandomly(),
new Task("Do assignment")
.setPriority(5)
.addTag("focus")
.addTag("school")
.setDeadlineRandomly(),
],
}
}

renderItem(item) {
return (
<TaskItem
key={item.item.key}
task={item.item}
editTask={(key) => this.editTask(key)}
deleteTask={(key) => this.deleteTask(key)}
/>
)
}

deleteTask(key){
console.log("TRYING TO DELETE", key)
for(var i = 0; i < this.state.taskList.length; i++) {
console.log(i, this.state.taskList[i].key)
if(this.state.taskList[i].key == key) {
// Found it
this.state.taskList.splice(i,1)
console.log("DELETING THAT ONE", this.state.taskList)
 }
 }
 this.setState({taskList: this.state.taskList})
 }

在TaskItem.js

中

export default class TaskItem extends React.Component {
constructor(props) {
super(props);
this.state = {task: props.task}
}

render() {
const task = this.state.task
const due = task.relativeDeadlineString()
// These styles will be customized based on current state
let descStyle = {fontSize:20, fontWeight: 'bold'}
let dueStyle = {fontSize:18}
let priStyle = {
flexDirection: 'row',
}
if(task.isDone()) {
  descStyle.textDecorationLine = 'line-through'
  descStyle.textDecorationStyle = 'solid'
  descStyle.color = '#aaaaaa'
}
else {                      // Otherwise task is not done
  priStyle.backgroundColor = task.getPriorityColor()
}
return (
  <View style={styles.item}>
  <TouchableOpacity onPress={()=>this.toggleDone()}>
   <View style={styles.container}>
      {renderIf(!this.state.task.isDone(), <MaterialCommunityIcons name="checkbox-blank-outline" size={40}/>)}
      {renderIf(this.state.task.isDone(), <MaterialCommunityIcons name="checkbox-marked-outline" size={40}/>)}  
   </View>
  </TouchableOpacity>
    <View style={styles.info}>
      <View style={styles.firstRow}>
      <Text style={descStyle}>{task.getDescription()}</Text>
  <View style={styles.middleRow}>
  <View style={styles.checkbox}>
      <TouchableOpacity
        onPress={()=>{task.deleteTask(task.key)}}>
        <Icon name="trash" size={24} />
      </TouchableOpacity>

Answer 1

deleteTask？

中的props是否已传入任务列表

  <TouchableOpacity
 - onPress={()=>{this.deleteTask(task.key)}}>
 + onPress={()=>{this.props.deleteTask(task.key)}}>
  <Icon name="trash" size={24} />
  </TouchableOpacity>

Answer 2

在TaskList.js

中

deleteTask(key){
 console.log("TRYING TO DELETE", key)
 var taskList = this.state.taskList.splice(key, 1); <-- I hope this works.
 this.setState({taskList: taskList})
}

Answer 3

deleteTask(key){
console.log("TRYING TO DELETE", key)
for(var i = 0; i < this.state.taskList.length; i++) {
console.log(i, this.state.taskList[i].key)
if(this.state.taskList[i].key == key) {
// Found it
this.state.taskList.splice(i,1)
console.log("DELETING THAT ONE", this.state.taskList)
}
}
this.setState({taskList: this.state.taskList})
}

为FlatList创建“删除项”功能

3 个答案: