Вопрос пользователя:
Ошибки:
hook.js:591 The above error occurred in the <BurgerIngredients> component:
at BurgerIngredients (webpack://react-canonical/./src/components/burger-ingredients/burger-ingredients.tsx?:20:79)
at div
at main
at ConstructorPage
at RenderedRoute (webpack://react-canonical/./node_modules/react-router/dist/index.js?:578:5)
at Routes (webpack://react-canonical/./node_modules/react-router/dist/index.js?:1279:5)
at div
at App (webpack://react-canonical/./src/components/app/app.tsx?:36:76)
at Router (webpack://react-canonical/./node_modules/react-router/dist/index.js?:1213:15)
at BrowserRouter (webpack://react-canonical/./node_modules/react-router-dom/dist/index.js?:703:5)
at Provider (webpack://react-canonical/./node_modules/react-redux/dist/react-redux.mjs?:1049:3)
import { useState, useRef, useEffect, FC, useMemo } from 'react';
import { useInView } from 'react-intersection-observer';
import { useSelector, useDispatch } from 'react-redux';
import { TTabMode } from '@utils-types';
import { BurgerIngredientsUI } from '../ui/burger-ingredients';
import { getIngredientsSelector } from '../../services/slices/ingredientSlice';
import { Preloader } from '../ui';
export const BurgerIngredients: FC = () => {
/** TODO: взять переменные из стора */
const ingredients = useSelector(getIngredientsSelector);
const buns = ingredients.filter((ingredient) => ingredient.type === 'bun');
const mains = ingredients.filter((ingredient) => ingredient.type === 'main');
const sauces = ingredients.filter(
(ingredient) => ingredient.type === 'sauce'
);
// const buns = [];
// const mains = [];
// const sauces = [];
const [currentTab, setCurrentTab] = useState<TTabMode>('bun');
const titleBunRef = useRef<HTMLHeadingElement>(null);
const titleMainRef = useRef<HTMLHeadingElement>(null);
const titleSaucesRef = useRef<HTMLHeadingElement>(null);
const [bunsRef, inViewBuns] = useInView({
threshold: 0
});
const [mainsRef, inViewFilling] = useInView({
threshold: 0
});
const [saucesRef, inViewSauces] = useInView({
threshold: 0
});
useEffect(() => {
if (inViewBuns) {
setCurrentTab('bun');
} else if (inViewSauces) {
setCurrentTab('sauce');
} else if (inViewFilling) {
setCurrentTab('main');
}
}, [inViewBuns, inViewFilling, inViewSauces]);
const onTabClick = (tab: string) => {
setCurrentTab(tab as TTabMode);
if (tab === 'bun')
titleBunRef.current?.scrollIntoView({ behavior: 'smooth' });
if (tab === 'main')
titleMainRef.current?.scrollIntoView({ behavior: 'smooth' });
if (tab === 'sauce')
titleSaucesRef.current?.scrollIntoView({ behavior: 'smooth' });
};
// if (loading) {
// return <Preloader />;
// }
// if (!loading && error) {
// return (
// <p className="error">Запрос завершился с ошибкой: {error}</p>
// );
// }
// if (!loading && ingredients.length === 0) {
// return (
// <p> Нет ингредиентов</p>
// );
// }
// return null;
// return (
// <Preloader />
// )
return (
<BurgerIngredientsUI
currentTab={currentTab}
buns={buns}
mains={mains}
sauces={sauces}
titleBunRef={titleBunRef}
titleMainRef={titleMainRef}
titleSaucesRef={titleSaucesRef}
bunsRef={bunsRef}
mainsRef={mainsRef}
saucesRef={saucesRef}
onTabClick={onTabClick}
/>
);
};
как исправить