Я пытаюсь определить свои собственные хуки в проекте MobX, которые зависят от наблюдаемых объектов mobx. Но невозможно обернуть хук с помощьюObserver(), потому чтоObserver() должен возвращать компонент. Есть ли способ определить хуки наблюдателя?
Пример:
// not working because observer must return a component
const useFindSuggestion = observer(({ target, node, suggestionsStore }: LinkSuggestionWrapperProps) => {
const [suggestions, setSuggestions] = useState<IDocumentInfo[]>([]);
useEffect(() => {
const suggestions = suggestionsStore.getRelevantSuggestions(node, target).filter((s) => s.documentId !== node.target);
setSuggestions(suggestions);
}, []);
return { suggestions };
});
@Danila UseEffect в хуке не срабатывает, потому что зависимости являются наблюдаемыми mobx. Добавление зависимостей в массив зависимостей не работает.
Ну, это должно работать в нормальной ситуации! Не могли бы вы создать репродукцию на codeandbox.io?
@Danila codeandbox.io/s/minimal-mobx-react-project-forked-8gnxgt С: [value, value.timer] -> работает, потому что таймер является неизменным и требует оценки.
Именно так вы это делаете, да, [value.timer]
как зависимость, потому что это то, о чем вы заботитесь. В чем вопрос тогда еще? :) Вы можете сделать то же самое для своего оригинального хука - добавить соответствующие поля в качестве зависимостей.
Решение найдено. Нужен автозапуск() :-) mobx.js.org/react-integration.html#useeffect
Решение: использовать автозапуск внутри хука https://mobx.js.org/react-integration.html#useeffect
Пример: https://codesandbox.io/s/minimal-mobx-react-project-forked-8gnxgt?file=/index.js
Не нужно делать ничего особенного, просто сделайте его обычным хуком, а затем используйте внутренний компонент, который обернут
observer