После быстрого переключения фильтра в таблице оказываются данные прошлого запроса
Таблица заказов загружает данные так:
function OrdersTable({ status }) {
const [orders, setOrders] = useState([]);
useEffect(() => {
fetchOrders(status).then(setOrders);
}, [status]);
// ...
}
Пользователь быстро переключает фильтр: сначала «новые», затем «отменённые». Иногда под фильтром «отменённые» в таблице оказываются новые заказы, хотя запрос за отменёнными ушёл последним и вернул корректный ответ.
Почему так происходит и что делать?
- Состояние обновляется асинхронно, поэтому ответ второго запроса теряется при склейке обновлений; поможет обновление через функцию от предыдущего значения.
- При частой смене зависимостей React выполняет эффекты в обратном порядке, поэтому последним применяется самый ранний запуск.
- Ответы приходят не в том порядке, в каком ушли запросы: медленный первый перезаписывает результат второго — спасает отмена или флаг в функции очистки.
- Ошибка в списке зависимостей: эффект должен зависеть ещё и от orders, иначе он не заметит смену фильтра и оставит в состоянии прежние данные.