import { useState, useRef, useEffect, FC } from 'react'; import { useInView } from 'react-intersection-observer'; import { useSelector, useDispatch } from 'react-redux'; import { TTabMode }

Вопрос пользователя:

import { useState, useRef, useEffect, FC } 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 { fetchIngredients, getIngredients } from '../../services/slices/ingredientSlice'; export const BurgerIngredients: FC = () => { /** TODO: взять переменные из стора */ const ingredients = useSelector(getIngredients); const dispatch = useDispatch(); useEffect(() => { dispatch(fetchIngredients()); }, [dispatch]); 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} /> ); }; как определить const buns = []; const mains = []; const sauces = []; из getIngredients

Ответ нейросети:

Пройдите быструю авторизацию для просмотра:

Для определения buns, mains и sauces из getIngredients, вам нужно получить данные из стора и преобразовать их в нужный формат. В данном случае, предположим, что данные из стора содержат массив объектов с информацией об ингредиентах, и каждый объект имеет поле type, указывающее на тип ингредиента (например, bun, main, sauce).

Вы можете использовать метод filter для фильтрации ингредиентов по их типу и добавить их в соответствующие массивы. Например:

const ingredients = useSelector(getIngredients);

const buns = ingredients.filter((ingredient) => ingredient.type === 'bun');
const mains = ingredients.filter((ingredient) => ingredient.type === 'main');
const sauces = ingredients.filter((ingredient) => ingredient.type === 'sauce');

Таким образом, после получения данных из стора с помощью getIngredients, вы можете отфильтровать их по типу ингредиента и добавить в соответствующие массивы buns, mains и sauces.

Напишите нам, если в вопросе есть ваши персональные данные (yasnoponyatno24@yandex.ru)

const ingredients = useSelector(getIngredients);

const buns = ingredients.filter((ingredient) => ingredient.type === 'bun');
const mains = ingredients.filter((ingredient) => ingredient.type === 'main');
const sauces = ingredients.filter((ingredient) => ingredient.type === 'sauce');

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

Пройдите быструю авторизацию для просмотра:

Пройдите быструю авторизацию для просмотра:

Последние вопросы: