Проблема, с которой я сталкиваюсь, заключается в том, что у меня есть элемент в состоянии с именем foo
, а затем у меня есть useCallBack
, который запускает серию отправок и ссылается на элемент состояния foo
.
Я также запускаю UseEffect
при загрузке страницы для обработки любых изменений из базы данных.
Проблема, с которой я столкнулся, заключается в следующем:
- Страница загружается
useEffect
запускает и загружает данные с сервера - useEffect запускает свой код и при необходимости вызывает
useCallBack
, который является зависимостью от useEffect
useCallback
запускает серию рассылок, которые обновляют foo
- Элемент состояния
foo
изменен useCallback
наблюдает foo
и обновляет useEffect
наблюдает за useCallback
и по мере его изменения запускается снова - Шаги 3-7 повторяются бесконечно
Пример в формате кода:
const { state, dispatch } = React.useContext(AppContext};
const { foo } = state;
const handleBar = React.useCallBack((bar: IBarType) => {
const bar_exists = _.find(foo, {id: bar.id});
if (bar){
dispatch({ type: 'rainbows', payload: bar });
} else {
dispatch({ type: 'clouds', payload: bar });
}
}, [foo]}
React.useEffect(() => {
serverFunction...
if (x){
handleBar(data)
}
}, [handleBar]}
Я предполагаю, что зависимость от foo
в обратном вызове handleBar
вызывает бесконечное l oop, я знаю, что вы можете удалить e зависимость от reactHook, используя что-то вроде setState(bar => bar ...)
.
Однако я просто не могу применить те же правила к функции handleBar
.
Я пробовал const bar_exists = _.find(foo: as IFooType => foo, { id: bar.id});
не повезло.