Вопрос пользователя:
import { FC } from 'react';
import { TOrder } from '@utils-types';
import { FeedInfoUI } from '../ui/feed-info';
import { getFeeds } from '../../services/slices/feedSlice';
import feedSlice from '../../services/slices/feedSlice';
import { useSelector } from '../../services/store';
const getOrders = (orders: TOrder[], status: string): number[] =>
orders
.filter((item) => item.status === status)
.map((item) => item.number)
.slice(0, 20);
export const FeedInfo: FC = () => {
/** TODO: взять переменные из стора */
const orders: TOrder[] = useSelector(feedSlice.selectors.getFeedOrdersSelector);
const feed = useSelector(feedSlice.selectors.getFeedSelector);
// const orders: TOrder[] = [];
// const feed = '';
const readyOrders = getOrders(orders, 'done');
const pendingOrders = getOrders(orders, 'pending');
return (
<FeedInfoUI
readyOrders={readyOrders}
pendingOrders={pendingOrders}
feed={feed}
/>
);
};
import { Preloader } from '@ui';
import { FeedUI } from '@ui-pages';
import { TOrder } from '@utils-types';
import { FC, useEffect } from 'react';
import { useDispatch, useSelector } from '../../services/store';
import feedSlice from '../../services/slices/feedSlice';
import { getFeeds } from '../../services/slices/feedSlice';
export const Feed: FC = () => {
/** TODO: взять переменную из стора */
// const orders: TOrder[] = [];
const orders: TOrder[] = useSelector(feedSlice.selectors.getFeedOrdersSelector);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getFeeds());
}, [dispatch]);
if (!orders.length) {
return <Preloader />;
}
<FeedUI orders={orders} handleGetFeeds={() => dispatch(getFeeds())} />;
};
import {
createSlice,
createAsyncThunk,
PayloadAction,
nanoid
} from '@reduxjs/toolkit';
import { TOrdersData } from '../../utils/types';
import { getFeedsApi } from '../../utils/burger-api';
import { get } from 'http';
export const getFeeds = createAsyncThunk(
'feed/getAllData',
getFeedsApi
);
type TFeedState = {
feed: TOrdersData;
loading: boolean;
error?: string | null;
};
export const initialState: TFeedState = {
feed: {orders: [], total: 0, totalToday: 0},
loading: false,
error: ''
};
export const feedSlice = createSlice({
name: 'feed',
initialState,
reducers: {},
extraReducers: (builder) => {
builder
.addCase(getFeeds.pending, (state) => {
// state.feed = {orders: [], total: 0, totalToday: 0};
state.loading = true;
state.error = null;
})
.addCase(getFeeds.fulfilled, (state, action) => {
state.feed = action.payload;
state.loading = false;
state.error = null;
})
.addCase(getFeeds.rejected, (state) => {
// state.feed = {orders: [], total: 0, totalToday: 0};
state.loading = false;
state.error = 'Ошибка';
});
},
selectors: {
getFeedOrdersSelector: (state) => state.feed.orders,
getFeedTotalSelector: (state) => state.feed.total,
getFeedTotalTodaySelector: (state) => state.feed.totalToday,
getFeedSelector: (state) => state.feed,
getLoadingSelector: (state) => state.loading,
getErrorSelector: (state) => state.error
}
});
export const feedSliceReducer = feedSlice.reducer;
export default feedSlice;
import { NotFound404 } from '@pages';
import { Modal } from '@components';
import { OrderInfo } from '@components';
import { IngredientDetails } from '@components';
import { BurgerIngredients, BurgerConstructor } from '@components';
import '../../index.css';
import styles from './app.module.css';
function App() {
const dispatch: ThunkDispatch<RootState, unknown, AnyAction> = useDispatch();
useEffect(() => {
dispatch(fetchIngredients());
}, [dispatch]);
const location = useLocation();
const backgroundLocation = location.state?.backgroundLocation;
const navigate = useNavigate();
const handleCloseModal = () => navigate(-1);
return (
<div className={styles.app}>
<AppHeader />
{/* <ConstructorPage /> */}
<Routes location={backgroundLocation || location}>
<Route path='/' element={<ConstructorPage />} />
<Route path='/feed' element={<Feed />} />
<Route
path='/feed/:number'
element={
<Modal
title='Информация о заказе'
onClose={handleCloseModal}>
<OrderInfo />
</Modal>
}
/>
<Route
path='/ingredients/:id'
element={
<Modal title='Детали ингредиента' onClose={handleCloseModal}>
<IngredientDetails />
</Modal>
}
/>
<Route
path='/profile/orders/:number'
element={
<Modal
title='Заказ'
onClose={handleCloseModal}>
<OrderInfo />
</Modal>
}
/>
</Routes>
</div>
);
}
export default App; Почему не отображается компонент Feed?
Ответ нейросети:
Пройдите быструю авторизацию для просмотра: Войти через Google
Войти через Яндекс
Войти через VK
Кажется, проблема заключается в том, что в компоненте App не был импортирован компонент Feed. Для того чтобы компонент Feed отображался на странице, необходимо импортировать его в компонент App и добавить соответствующий Route для него в компоненте Routes.
Проверьте, что вы импортировали компонент Feed в файле App.tsx:
import { Feed } from './path/to/FeedComponent' ; Затем добавьте Route для компонента Feed в компоненте Routes:
< Route path = '/feed' element = { < Feed /> } /> После этого компонент Feed должен отображаться на странице. Если проблема не решена, пожалуйста, уточните, в какой части кода возникает проблема, чтобы мы могли предоставить более точный ответ.