У меня есть класс, который отвечает за асинхронную выборку содержимого:
class ServiceFetcher {
data = null;
busy = false;
fetchOperation = null;
fetchVersion = 0; // initially set to 0
constructor(fetcherFunction, initialData) {
this.fetcherFunction = fetcherFunction;
this.data = initialData;
}
fetch = () => {
if (this.busy) {
return this.fetchOperation;
}
this.busy = true;
this.fetchOperation = this.fetcherFunction().then(data => {
this.data = data;
this.busy = false;
this.fetchVersion++; // incremented here
return data;
});
return this.fetchOperation;
};
}
, и я хочу обновить переменную в отдельном компоненте при изменении fetchVersion (выборка нового содержимого).
Я настроил его так:
const articles = useMemo(() => ArticleService.get().data, [ArticleService.get().fetchVersion]);
, где ArticleService.get()
- это синглтон, который возвращает ссылку на класс ServiceFetcher
.
Проблема в том, что useMemo
выполняется только один раз (при первоначальном рендере), но не после изменений fetchVersion
. Что я делаю не так?
PS: я пытался реализовать тот же шаблон с useEffect
и получил тот же результат. Я думаю, что в корне неправильно понимаю, как работает поле input
крючков.