Fla sh происходит с использованием React-beautiful-dnd и Cloud Firestore - PullRequest
Новая
       31

Fla sh происходит с использованием React-beautiful-dnd и Cloud Firestore

1 голос
/ 26 января 2020

Я разрабатываю приложение реагирования, которое использует Firebase (Cloud Firestore), Redux и React-beautiful-DnD.

Вот изображение GIF

Всякий раз, когда я переместить задачу в другой столбец, что происходит в sh. Я предполагаю, что причины для одновременного вызова нескольких запросов в Cloud Firestore. Вот код, который я использую для запроса update () в Cloud Firestore.

Примечание: хотя я использовал «транзакцию», я не хочу ее использовать, потому что обработка занимает много времени, чтобы перехватить данные из Облачные функции. Также использовался «пакет», однако, fla sh произошел аналогичным образом. 

  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"

1 Ответ

0 голосов
/ 06 февраля 2020

У меня похожая проблема. Это может происходить потому, что вызов Firebase является асинхронным, поэтому перед выполнением then происходит небольшая задержка. И RBD требует, чтобы эффект onDragEnd был синхронным.

Из документации :

onDragEnd (обязательно): перетаскивание завершено. Ответчик обязан синхронно применять изменения, вызванные перетаскиванием

. Решение состоит в том, чтобы вручную обновить ваше состояние перед вызовом Firebase.

...