Допустим, у нас есть сетка плиток со следующим поведением:
- Есть кнопка для добавления плитки. Плитка решит, должна ли она быть красной или синей плиткой после некоторого времени обдумывания (1-3 сек). Плитка будет зеленой, пока она думает, какого цвета она должна быть.
- Нажатие заголовка удалит плитку из сетки
Пусть tiles будет массивом цветов плитки, которыйбудет служить состоянием сетки тайлов, а setTiles - установщиком этого состояния. Учитывая поведение сетки, setTiles должен вызываться во время следующих событий:
- по щелчку плитки. Кликаемый элемент должен быть удален из
tiles. - по нажатию кнопки добавления. Зеленая плитка должна быть добавлена к
tiles. - после того, как плитка решит, какой у нее цвет. Соответствующее значение зеленого в
tiles должно быть изменено на красное или зеленое.
Я подготовил codepen простой реализации сетки, описанной выше. Проблема заключается в том, что вызовы setTiles после оператора await перезаписывают изменения состояния, которые произошли между началом и концом асинхронного оператора. Я думаю, это потому, что функция имеет ссылку только на значение состояния перед началом асинхронной операции.
Какая архитектура лучше (изменения компонентов, передача обратного вызова, структура данных тайла), с использованием SFC и хуковAPI , чтобы избежать непреднамеренных перезаписей и, в конечном счете, сетка плиток всегда имеет обновленный массив данных плиток?