Блог

Я пытаюсь создать список дел перетаскивания … После каждого перетаскивания позиция каждого элемента обновляется в firebase…Это функция, выполняющая это

 unfinishedTodos.forEach((each, index) => {
 firebaseApp.firestore().collection("todos").doc(each.id).update({
   index: index})
});
 

Но после запуска функции обновления весь компонент перезагружается..Проблема в том, что, поскольку в списке много элементов, мне приходится снова прокручивать, чтобы найти элемент, с которым я работал…Я хочу убедиться, что документы firestore обновляются, но страница не должна перезагружаться … Как я могу предотвратить эту перезагрузку?
Обновление:
Я выяснил, что пошло не так…На самом деле я использовал функцию onSnapshot firebase…So при каждом изменении он срабатывал и перезагружал данные…

React обновляет компонент всякий раз, когда изменяется какая-либо state или props переменная.

Итак, чтобы предотвратить повторный рендеринг условно, вы можете использовать эту функцию жизненного цикла (возврат false означает предотвращение повторного рендеринга):

компонент класса

 shouldComponentUpdate(prevState, prevProps) {
    if (this.state.someVariable !== prevState.someVariable || 
        this.props.someVariable !== prevProps.someVariable) {
        return false;
    }

    return true;
}
 

функциональный компонент

 React.memo(MyComponent, (props, nextProps)=> {
    if(this.state.someVariable !== prevState.someVariable) {
        // if don't re-render/update
        return true
    }

    //...
})