Firebase - 在发送到 Cloud Firestore 时保存临时数据答案

【问题标题】：Firebase - hold temporary data while being sent to cloud firestoreFirebase - 在发送到 Cloud Firestore 时保存临时数据
【发布时间】：2020-07-05 10:38:16
【问题描述】：

我有一个由 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 中实现这样的系统？

【问题讨论】：

标签： reactjs firebase google-cloud-firestore react-state-management react-state

【解决方案1】：

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

即第一次渲染后，状态与firestore分离。

类似的东西。

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

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

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

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

【讨论】：

有没有一种简单的方法可以监听来自钩子的更改，以便更新本地存储？我知道在您的示例中，状态与 firestore 完全分离，但该应用程序是多用户的，因此如果另一个用户更新 firestore，则该客户端将具有过时的数据。理想情况下，在数据库中的每个更改都安全之后，将触发 onSnapshot 并将新数据写入本地存储。这样，如果另一个用户更新数据库，更改将传递给客户端并更新他的屏幕。
我是否理解正确，“项目”始终包含来自 firebase 的实时数据？在这种情况下，您可以使用 useEffect() Hook 在项目更改时始终更新 localData：useEffect(()=>{ setLocalData(projects); }, [projects]}

【解决方案2】：

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

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

【讨论】：

感谢您的回答！不幸的是，我被 Firestore 卡住了，所以无法更改为实时数据库。