Не знаете, как решить проблему времени в React 19? ⇐ Javascript

[Anonymous]

Мы обновили с React 18 до React 19, и он представил интересную ошибку времени. У нас есть общая форма поиска с использованием формы реагирования и реагирования-кхай-форм-муки, которая обусловлена ​​URL. Эта форма формы может иметь вложенные поиски, которые используются для заполнения родительской формы перед поиском. Форма обусловлена ​​URL как источником истины при нагрузке или возврата из вложенного поиска. Так, например, поток будет/поиск/учетная запись -> Поиск человека ->/lookup/person -> return person ->/lookup/account? Personid = 1234 . Однако после обновления кажется, что обновления в крючке поглощаются какой -то проблемой времени/пакетирования. Когда мы переходим от родителя к вложенному поиску и возвращаем значения обратно в родительскую форму, используя функцию перемещения маршрутизатора, я подтвердил в крючке, что соответствующие значения находятся в запросе, и SetValue вызывается, но он отсутствует в форме. в форме Как и ожидалось, но работает на обычной скорости.

Код: Выделить всё

import dot from 'dot-object';
import isEmpty from 'lodash/isEmpty';
import isEqual from 'lodash/isEqual';
import isNil from 'lodash/isNil';
import qs from 'qs';
import { useFormContext } from 'react-hook-form';
import { useLocation } from 'react-router';
import { useEffect, useMemo, useState } from 'react';

export const useSyncUrlParamsToForm = (hideForm) => {
const { setValue, getValues } = useFormContext();
const { search } = useLocation();
const [executeInitialSearch, setExecuteInitialSearch] = useState(false);
const queryParams = useMemo(
() => qs.parse(search, { ignoreQueryPrefix: true }),
[search]
);
useEffect(() => {
if (!hideForm) {
if (isEmpty(queryParams)) {
return;
}
}
dot.keepArray = true;
const executeSearch = hideForm ?? false;
const currentValues = dot.dot(getValues());
for (const [key] of Object.entries(currentValues)) {
if (queryParams[key] && !isEqual(queryParams[key], currentValues[key])) {
setValue(key, queryParams[key]);
} else if (key === 'sortModel' && queryParams.sort) {
// executeSearch = true;
let field = queryParams.sort;
const sort = field.startsWith('-') ? 'desc' : 'asc';
if (field.startsWith('-')) {
field = field.substring(1);
}
const sortModel = [{ field, sort }];
if (!isEqual(sortModel, currentValues[key])) {
setValue(key, sortModel);
}
} else if (
key === 'paginationModel' &&
(queryParams.limit || queryParams.skip)
) {
// executeSearch = true;
const limit = isNil(queryParams.limit)
? 100
: parseInt(queryParams.limit, 10);
const skip = isNil(queryParams.skip)
? 0
: parseInt(queryParams.skip, 10);
const pagination = {
pageSize: limit,
page: skip / limit
};
if (!isEqual(pagination, currentValues[key])) {
setValue(key, pagination);
}
}
}
if (executeSearch) {
setExecuteInitialSearch(true);
}
}, [getValues, hideForm, queryParams, setValue]);
return [executeInitialSearch, setExecuteInitialSearch];
};
< /code>
Я не уверен, что будет причинять это в React 19, и не уверен, как идти вперед. Я пробовал такие вещи, как FlushSync 

или обертывание обновлений в settimeout , чтобы попытаться заставить их запустить после короткой задержки, но ничего не сработало. Единственное, что я смог получить работу, - это использовать местоположение. Assign VS Router vesigate, но это дает странный пользовательский опыт, когда страница загрузит новую форму с момента обновления URL После завершения навигации.

Подробнее здесь: https://stackoverflow.com/questions/794 ... n-react-19