Question

包含动态列表的反应应用程序我有两次操作

1.add

2.delete

维护this.state.tasks中的列表并且在数据库中

渲染中

{this.state.tasks.map(tile => (
     <GridListTile cols='1'>           
     <Task content={tile} saveData={this.updateData}/>             
     </GridListTile>           
))}

有4个对象显示为图块现在我要删除第一个对象，我正在db中进行更新，并从db中获取新列表并将其分配给状态

我正在从数据库获取数据

this.setState({tasks : data})

由于状态已更新，因此渲染功能被称为对象数减少到3，但删除的对象仍然存在

删除功能：

deleteData(val) {
  var apiHeader = {
    'taskid': val
  }
  fetch("/api/deleteTask", {
    method: 'GET',
    headers: apiHeader
  })
  .then(res => this.getAvailableTasks()) 
}


getAvailableTasks() {
    fetch("/api/getTasks", {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
   },
    }).then(res => res.json())    // in response i am getting 3 only and also 3 documents are showing in db also
    .then(data => this.setState({tasks : data}));       
}

Answer 1

声明函数的方式将使它们无法将当前上下文识别为this。您可以尝试：

  deleteData =() => {
   // code
}
 getAvailableTasks = () => {
       // your code here
  }

Answer 2

通过保持另一个初始状态解决了此问题

this.baseState = this.state;

在更新状态对象之前，先分配初始状态，然后再更新对象

this.setState(this.baseState);
this.setState({tasks : data});

即使在反应中更新状态后，旧状态仍然存在

2 个答案: