reactjs - 使用 React-beautiful-dnd 和 Cloud Firestore 发生 Flash

Question

我正在开发一个使用 Firebase(Cloud Firestore)、Redux 和 React-beautiful-DnD 的 React 应用程序。

Here is gif image

每当我将 ToDo-Task 移至另一列时，就会发生闪烁。 我认为原因是同时向 Cloud Firestore 调用多个请求。 以下是我用来向 Cloud Firestore 请求 update() 的代码。

注意:虽然我使用了“事务”，但我不愿意使用它，因为处理需要很长时间才能从 Cloud Functions 捕获数据。虽然也使用了“batch”，但同样发生了闪光。

---

  export const UpdateColumn = (newState, drraggableId) => {
  console.log(newState, drraggableId);
  return (dispatch, getState, { getFirebase, getFirestore }) => {
    const firestore = getFirestore();

    const taskId = drraggableId;
    const startColumnName = Object.keys(newState.newStart);
    const finishColumnName = Object.keys(newState.newFinish);


    firestore
      .collection("columns")
      .doc(startColumnName[0].toString())
      .update({
        taskIds: newState.newStart[startColumnName].taskIds
      });

    firestore
      .collection("columns")
      .doc(finishColumnName[0].toString())
      .update({
        taskIds: newState.newFinish[finishColumnName].taskIds
      });

    firestore
      .collection("projects")
      .doc(taskId)
      .update({
        currentColumn: finishColumnName[0]
      })
      .then(() => {
        dispatch({ type: "UPDATE_COLUMN_SUCCESS" });
      })
      .catch(err => {
        dispatch({ type: "UPDATE_COLUMN_ERROR", err });
      });
  };
};

以下是我在项目中使用的依赖项:

"firebase": "^7.6.1",
"moment": "^2.24.0",
"react": "^16.12.0",
"react-beautiful-dnd": "^12.2.0",
"react-dom": "^16.12.0",
"react-redux": "^5.1.1",
"react-redux-firebase": "^2.2.4",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"redux": "^4.0.5",
"redux-firestore": "^0.11.0",
"redux-thunk": "^2.3.0"

Answer 1

我也有类似的问题。发生这种情况的原因是对 Firebase 的调用是异步的，因此在执行 then 之前会有一点延迟。并且 RBD 要求效果 onDragEnd 是同步的。

来自documentation :

onDragEnd (required): A drag has ended. It is the responsibility of this responder to synchronously apply changes that has resulted from the drag

解决方案是在调用 Firebase 之前手动更新您的状态。