#javascript #reactjs #react-hooks
#javascript #reactjs #реагирующие хуки
Вопрос:
У меня есть такой компонент:
import React, { useEffect } from 'react';
const WindowFocusHandler = ({store}) => {
// here store object is valid and work
useEffect(() => {
window.addEventListener('focus', () => {
console.log('Tab is in focus... but no store object here', store);
});
});
return <></>;
};
export default WindowFocusHandler;
И я пытаюсь передать store
объект внутри функции прослушивателя, но не смог, что бы я ни пытался.
Комментарии:
1. Вы передали хранилище в WindowFocusHandler?
2.
store
наверняка находится в области видимости и доступен изнутри эффекта. Проблема должна быть в вызове компонента. Это не проблема области видимости, объект уже обнуляется3. Компонент добавляется в корень приложения <WindowFocusHandler store={store}/> . Если я попытаюсь
(store) => ...
, я получу событие window, а не мое хранилище, которое я передал
Ответ №1:
Попробуйте это:
import React, { useEffect } from 'react';
const WindowFocusHandler = ({ store }) => {
useEffect(() => {
const fn = () => {
console.log('Tab is in focus...', store);
};
window.addEventListener('focus', fn);
return () => window.removeEventListener('focus', fn);
}, [store]);
return <></>;
};
export default WindowFocusHandler;
Комментарии:
1. Эффект использования зависит от
fn
и не зависит отstore
. Вы можете создатьfn
внутри useEffect. Или оберните fn с помощью useCallback с помощью dep [store] и измените dep на useEffect [fn].2. Да, хороший вызов. Я отредактировал свой ответ. Спасибо, что присмотрелись!