UseEffect продолжает рендерить обходной путь
У меня есть небольшая проблема. Я хочу вызывать 4 API, когда компонент начинает рендеринг, поэтому я использовал для этого эффект использования, поэтому я зацикливаю свой массив, который имеет 4 элемента, и в каждом элементе я вызываю API, и каждый API сохраняет результат в селекторе с именем filtersCount. Проблема в том, что когда filterCount обновил цикл, он начинается заново. Как я могу предотвратить это, не отключая eslint??
const fetchCounts = useCallback(
(item) => {
if (!filtersCount[item.key]) {
dispatch(getFilterCount({ filters: item.countFilters, key: item.key }));
}
},
[dispatch, filtersCount]
);
useEffect(() => {
exploreItemTypes.map((item) => {
fetchCounts(item);
});
}, [exploreItemTypes, fetchCounts]);
Ответы 2
вы можете использовать Ref для этого:
const firstRender =useRef(false)
useEffect(() => {
if (firstRender.current == false){
exploreItemTypes.map((item) => {
fetchCounts(item);
});
firstRender.current = true
}
}, [exploreItemTypes, fetchCounts]);
да, мы использовали это в профессиональных проектах, вы, вероятно, можете добиться того же результата, используя переменную, объявленную вне класса.
Я думаю, что самый простой способ - использовать пустой массив в вашем useEffect.
useEffect(() => {
exploreItemTypes.map((item) => {
fetchCounts(item);
});
}, []);
это остановится, как только ваша итерация закончится.
не могу поверить, что я не подумал об этом, да, это также должно быть приемлемым решением, я бы все равно добавил fetchCounts в массив зависимостей.
но это даст ошибки в eslint, в этом случае fetchCount должен быть обратным вызовом и будет принимать зависимости в массиве. Итак, это то же самое
Это сработало, но как вы думаете, практично ли это?