Избегайте `setTimeout` 'взломать', чтобы убедиться, что состояние находится в синхронизации

Question

Я написал небольшое приложение todo с использованием React, в котором пользователь может добавлять и удалять элементы в свой список.

В качестве бонусной функции список сохраняется в localStorage, так как он изменен пользователем и используется для первоначального монтирования компонента.

В обоих addTodo и removeTodo методов, картина такова:

1. Установить новое состояние путем добавления или удаления элемента из this.state.todos
2. Копия государства к localStorage

Для Например, здесь используется метод removeTodo:

removeTodo(indexOfItemToRemove) { 
    const todosCopy = this.state.todos.slice(); 

    todosCopy.splice(indexOfItemToRemove, 1); 

    this.setState({ 
     todos: todosCopy 
    }); 

    this.updateLocalStorageWithState(); 
} 

Вот что я сейчас делаю, чтобы сохранить this.state.todos в localStorage

updateLocalStorageWithState() { 
    setTimeout(() => { 
     localStorage.setItem('localStorageTodos', JSON.stringify(this.state.todos)); 
    }, 1); 
} 

Я обнаружил, что без использования setTimeout, то localStorage всегда был один шаг позади, используя то, что пользователь может воспринимать как устаревшую версию списка ,

Это похоже на хак. Как я могу включить способ сделать то же самое, не используя ручку setTimeout?

Answer 1

setState() не обязательно выполняется синхронно. Это приводит к тому, поведение, которое вы испытываете:

setState() не сразу мутировать this.state но создает отложенный переход состояния. Доступ к this.state после вызова этого метода может потенциально вернуть существующее значение.

Нет гарантии синхронной работы звонков на setState, и звонки могут быть отправлены для повышения производительности.

Source

---

К счастью, setState() занимает второй параметр, который является функцией обратного вызова, которая вызывается, когда состояние обновление было завершено. Вы можете использовать это, чтобы синхронизировать локальную запись хранения:

this.setState({ 
    todos: todosCopy 
},() => { 
    localStorage.setItem('localStorageTodos', JSON.stringify(this.state.todos)); 
}); 

---

Кроме того, почему бы не установить запись локального хранилища непосредственно вместо чтения state первой?

this.setState({ 
    todos: todosCopy 
}); 

localStorage.setItem('localStorageTodos', JSON.stringify(todosCopy));