ЯсноПонятно24

из-за чего возникают ошибки сам компонент import { useState, useRef, useEffect, FC, useMemo } from 'react'; import { useInView } from 'react-intersection-observer'; import { useSelector } 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' }); }; // return null; return ( <BurgerIngredientsUI currentTab={currentTab} buns={buns} mains={mains} sauces={sauces} titleBunRef={titleBunRef} titleMainRef={titleMainRef} titleSaucesRef={titleSaucesRef} bunsRef={bunsRef} mainsRef={mainsRef} saucesRef={saucesRef} onTabClick={onTabClick} /> ); }; slice: import { createSlice, createAsyncThunk, PayloadAction, createSelector } from '@reduxjs/toolkit'; import { TIngredient } from '@utils-types'; import { getIngredientsApi } from '../../utils/burger-api'; type TIngredientState = { ingredients: Array<TIngredient>; loading: boolean; error?: string | null; }; const initialState: TIngredientState = { ingredients: [], loading: false, error: '' }; export const fetchIngredients = createAsyncThunk<TIngredient[]>( 'ingredients/getAll', getIngredientsApi ); const ingredientSlice = createSlice({ name:'ingredients', initialState, reducers: {}, selectors: { getIngredientsSelector: (state) => state.ingredients, getLoadingSelector: (state) => state.loading, getErrorSelector: (state) => state.error }, extraReducers: (builder) => { builder .addCase(fetchIngredients.pending, (state) => { state.loading = true; state.error = null; }) .addCase(fetchIngredients.rejected, (state, action) => { state.loading = false; state.error = action.error.message; }) .addCase( fetchIngredients.fulfilled, (state, action: PayloadAction<TIngredient[]>) => { state.loading = false; state.ingredients = action.payload; } ) } }); export const ingredientSliceReducer = ingredientSlice.reducer; // export const { getLoadingSelector, getErrorSelector } = ingredientSlice.selectors; export const getIngredientsSelector = ingredientSlice.selectors.getIngredientsSelector; export default ingredientSlice;