Вопрос пользователя:
import { forwardRef, useMemo } from 'react';
import { TIngredientsCategoryProps } from './type';
import { TIngredient } from '@utils-types';
import { IngredientsCategoryUI } from '../ui/ingredients-category';
import { useSelector } from 'react-redux';
import burgerSlice from '../../services/slices/burgerSlice';
export const IngredientsCategory = forwardRef<
HTMLUListElement,
TIngredientsCategoryProps
>(({ title, titleRef, ingredients }, ref) => {
/** TODO: взять переменную из стора */
// const burgerConstructor = {
// bun: {
// _id: ''
// },
// ingredients: []
// };
const burgerConstructor = useSelector(burgerSlice.selectors.getBurgerIngredientsSelector);
const ingredientsCounters = useMemo(() => {
const { ingredients, bun } = burgerConstructor;
const counters: { [key: string]: number } = {};
ingredients.forEach((ingredient: TIngredient) => {
if (!counters[ingredient._id]) counters[ingredient._id] = 0;
counters[ingredient._id]++;
});
if (bun) counters[bun._id] = 2;
return counters;
}, [burgerConstructor]);
return (
<IngredientsCategoryUI
title={title}
titleRef={titleRef}
ingredients={ingredients}
ingredientsCounters={ingredientsCounters}
ref={ref}
/>
);
});
import {
createSlice,
createAsyncThunk,
PayloadAction,
nanoid
} from '@reduxjs/toolkit';
import { TConstructorIngredient, TIngredient } from '@utils-types';
type TBurgerState = {
burgerIngredients: TConstructorIngredient[];
bun: TConstructorIngredient | null;
};
const initialState: TBurgerState = {
burgerIngredients: [],
bun: null
};
const burgerSlice = createSlice({
name: 'burgers',
initialState,
reducers: {
addBurgerIngredient: {
reducer: (state, action: PayloadAction<TConstructorIngredient>) => {
if (action.payload.type === 'bun') {
state.bun = action.payload;
} else {
state.burgerIngredients.push(action.payload);
}
console.log(action.payload._id);
},
prepare: (ingredient: TIngredient) => {
const id = nanoid();
return { payload: { ...ingredient, id } };
}
},
removeBurgerIngredient: (state, action: PayloadAction<string>) => {
state.burgerIngredients = state.burgerIngredients.filter(
(ingredient) => ingredient.id !== action.payload
);
},
moveBurgerIngredient: (
state,
action: PayloadAction<{ currentIndex: number; targetIndex: number }>
) => {
const { currentIndex, targetIndex } = action.payload;
const ingredientToMove = state.burgerIngredients[currentIndex];
state.burgerIngredients.splice(currentIndex, 1);
state.burgerIngredients.splice(targetIndex, 0, ingredientToMove);
},
clearBurger: (state) => {
state.burgerIngredients = [];
state.bun = null;
}
},
selectors: {
getBurgerIngredientsSelector: (state) => state.burgerIngredients,
getBunSelector: (state) => state.bun
}
});
export const burgerSliceReducer = burgerSlice.reducer;
export const { getBurgerIngredientsSelector, getBunSelector } =
burgerSlice.selectors;
export default burgerSlice;
Почему выдает ошибку const { ingredients, bun } = burgerConstructor; Свойство "ingredients" не существует в типе "TConstructorIngredient[]".ts(2339) Свойство "bun" не существует в типе "TConstructorIngredient[]".ts(2339
Ответ нейросети:
Пройдите быструю авторизацию для просмотра: Войти через Google
Войти через Яндекс
Войти через VK
Ошибка возникает потому, что переменная burgerConstructor имеет тип TConstructorIngredient[], а не объект, содержащий свойства ingredients и bun.
Чтобы избежать этой ошибки, вам нужно обновить тип burgerConstructor таким образом, чтобы он содержал свойства ingredients и bun. Например, вы можете создать новый интерфейс:
interface TBurgerConstructor {
ingredients : TConstructorIngredient[];
bun: TConstructorIngredient | null ;
}Затем вы можете использовать этот интерфейс вместо массива TConstructorIngredient[]:
const burgerConstructor = useSelector(burgerSlice.selectors.getBurgerIngredientsSelector) as TBurgerConstructor; После этого ошибка должна исчезнуть, и вы сможете получить доступ к свойствам ingredients и bun объекта burgerConstructor без ошибок.