Reactjs 以前的状态即使在使用新数据调用setState（）后仍保持

我正在使用Firebase Cloud Firestore制作一个任务应用程序

我添加了一个

realtime listener

，用于在添加新任务时重新呈现平面列表

但是我面临这样一个问题，

状态tasks=[]

被附加到

旧状态

，这导致Flatlist中的任务重复

我只想刷新整个列表

这是我的实时侦听器代码：

此.state={
任务：[]，
};
fetchTasks（）{
试一试{
this.setState（{loading:true}）；
const uid=auth（）.currentUser.uid；
常数=[]；
firestore（）
.collection（“任务”）
.where（'uid'，'='，`${uid}`）
.onSnapshot（快照=>{
snapshot.forEach（doc=>{
log（'realtime:'，JSON.stringify（doc.data（），null，2））；
诱惑，推({
taskId:doc.id，
数据：doc.data（），
});
});
this.setState（{tasks:[]}）；
this.setState（{tasks:testasks，load:false}）；
log（'tasks:'，this.state.tasks.length）；
});
}捕获（e）{
this.setState（{loading:false}）；
Alert.Alert（'Error fetching tasks'，`${e}'，[{text:'OK'}]）；
log（'err in realtime'，e）；
}
}
render（）{
返回(
index.toString（）}
/>
)

最初：一项任务

最终：添加任务后，任务1的副本也会显示为状态中追加了

tasks=[]

，而不是同时刷新任务1和任务2

工作日志：

tempTasks [
  {
    "taskId": "FljhGGlsFN7yrD4GajDe",
    "data": {
      "status": "pending",
      "createdOn": {
        "_seconds": 1578761968,
        "_nanoseconds": 66000000
      },
      "title": "Task 1",
      "deadline": {
        "_seconds": 1578761940,
        "_nanoseconds": 0
      },
      "description": "apsdfplsdv",
      "author": "yashGmail",
      "uid": "t2kHrhIMbLggj2BpxKbJrPW9GL42"
    }
  },
  {
    "taskId": "GhF5nYalbTZZZH5j2lNO",
    "data": {
      "status": "pending",
      "createdOn": {
        "_seconds": 1578762188,
        "_nanoseconds": 226000000
      },
      "title": "Task 2",
      "deadline": {
        "_seconds": 1578761940,
        "_nanoseconds": 0
      },
      "description": "asdvlksdk",
      "author": "yashGmail",
      "uid": "t2kHrhIMbLggj2BpxKbJrPW9GL42"
    }
  }
]

---

非常感谢您的帮助。

您需要检查事件

.onSnapshot（snapshot=>{}）

是否仅使用较新的元素触发，还是使用所有元素触发。从您的代码中可以清楚地看出，您正在使用

entitasks

更新

state.tasks

，因此非常清楚的是

entitasks

中的数据也是重复的，原因我已经在上面解释过了

如果使用所有数据触发了

onSnapshot

，则可以尝试此操作：

firestore()
.collection('Tasks')
.where('uid', '==', `${uid}`)
.onSnapshot(snapshot => {
  console.log(snapshot) // This to check what data is inside snapshot
  const tempTasks = snapshot.map(doc => ({
    taskId: doc.id,
    data: doc.data(),
  }))
  this.setState({tasks: tempTasks, loading: false});
})

---

您需要检查事件

.onSnapshot（snapshot=>{}）

是否仅由较新的元素触发，还是由所有元素触发。从您的代码中可以清楚地看出，您正在使用

entitasks

更新

state.tasks

，因此非常清楚的是

entitasks

中的数据也是重复的，原因我已经在上面解释过了

如果使用所有数据触发了

onSnapshot

，则可以尝试此操作：

firestore()
.collection('Tasks')
.where('uid', '==', `${uid}`)
.onSnapshot(snapshot => {
  console.log(snapshot) // This to check what data is inside snapshot
  const tempTasks = snapshot.map(doc => ({
    taskId: doc.id,
    data: doc.data(),
  }))
  this.setState({tasks: tempTasks, loading: false});
})

---

这适用于添加新任务，但当删除任务并调用侦听器时，将从

状态中删除错误的任务。tasks=[]

，例如，如果我删除任务1，任务3将从

状态中消失。tasks=[]

。尽管侦听器查询结果正确，并且仅删除了任务1，但请检查您的

快照

参数。如您所见，这里的逻辑非常简单，只需将快照中获取的数据添加到状态。因此，如果数据错误，则表示您正在删除错误的数据或其他内容出错。这适用于添加新任务，但当删除任务并调用侦听器时，错误的任务将从

状态中删除。tasks=[]

，例如，如果我删除任务1，任务3将从

状态中消失。tasks=[]

。尽管侦听器查询结果正确，并且仅删除了任务1，但请检查您的

快照

参数。如您所见，这里的逻辑非常简单，只需将快照中获取的数据添加到状态。因此，如果数据是错误的，就意味着你删除了错误的数据，或者其他东西出错了。