Reactjs Firebase-在发送到云firestore时保留临时数据

我有一个由firebase数据驱动的日历。当用户通过移动或调整任务大小进行编辑时，它将快速移回其原始位置，然后数据库将更新客户端，新数据将显示在页面上

下面是一个简单的图表来解释：

A - User moves task in calendar UI
↓
B - UI flicks back to its previous position
↓
C - Data is sent to Cloud Firestore
↓
D - Updated data is returned to the client via a realtime listener
↓
E - UI is updated

点A和点E之间的延迟可以小到50毫秒，但时间可以长到1000毫秒

在用户进行更改后，是否有任何方法在更新firestore中的数据时在用户浏览器中存储反映更新的临时数据？当实时侦听器启动时，它将重置临时数据，所有数据都将是最新的

这是我的当前代码，用于侦听更改并更新

projects

变量：

const [projects, loadingProjects, errorProjects] = useCollection(
    organisationID && firebase.firestore().collection('organisations').doc(organisationID).collection("projects"),
    {
      snapshotListenOptions: { includeMetadataChanges: true },
    }
  );

---

如何在React中实现这样的系统？

一种方法是在第一次获取数据时将数据保存到本地状态，日历将引用它

也就是说，在第一次渲染之后，状态与firestore分离

像这样的

function App() {
  const [localData, setLocalData] = useState(null);

  useEffect(() => {
    setLocalData(dataFromFirestore)
  }, []);

  const handleClick = (data) => {
    setLocalData(data)
    saveDataToFirestore(data)
  }

  return <Calender onClick={handleClick} data={localData} />
}

函数应用程序（）{
const[localData，setLocalData]=useState（null）；
useffect（（）=>{
setLocalData（dataFromFirestore）
}, []);
常量handleClick=（数据）=>{
setLocalData（数据）
saveDataToFirestore（数据）
}
返回
}

不知道您是否可以切换，但有一种解决方案是将Firestore数据库用于此目的，就像在该数据库中一样，即使您的数据库没有实际更新，它也足够智能，可以查看更改并更新数据

---

缺点：由于它是根据读取数据库的次数计费的，这可能会反映在您的账单中

有没有一种简单的方法可以让我监听钩子的更改，以便更新本地存储？我知道在您的示例中，状态与firestore完全分离，但应用程序是多用户的，因此如果其他用户更新firestore，此客户端将具有过时的数据。理想情况下，在数据库中安全地进行每个更改之后，将触发onSnapshot，并将新数据写入本地存储。这样，如果另一个用户更新数据库，更改将传递到客户端并更新其屏幕。我是否理解正确，“项目”始终保存来自firebase的实时数据？在这种情况下，您可以使用useffect（）钩子在项目更改时始终更新本地数据：useffect（（）=>{setLocalData（projects）；}，[projects]}谢谢您的回答！不幸的是，我被Firestore卡住了，因此无法更改为实时数据库。