这种情况我应该给什么类型的饭菜？

Question

您好，我需要这方面的帮助，我不知道应该给我的 props 提供什么类型，我想将其传递给 redux 切片。

我收到错误“‘Meal[]’类型的参数无法分配给‘Meal’类型的参数。类型“Meal[]”缺少类型“Meal”中的以下属性：_id、_createdAt、_updatedAt、_ref 和 7 more.ts(2345)

import { useEffect } from "react";
import Head from "next/head";
//-=-=-=-=-=-=-=-=-=Type import from next-=-=-=-=-=-=-=-
import type { NextPage, GetServerSideProps } from "next";
//-=-=-=-=-=-=-=-=-=Componenets imports--=-=-=-=-=-=-=-
import { Header } from "../components/header/header";
import { Revolver } from "../components/revolver/revolver";
//-=-=-=-=-=-=-=-=-=-utilties fetches-=-=-=-=-=-=-=-=-=-
import { fetchMeals } from "../util/fetchMeals";
import { fetchCategories } from "../util/fetchCategories";
import { useDispatch } from "react-redux";
import { addMeals } from "../redux/mealsSlice";
import { addCategories } from "../redux/categoriesSlice";

// import { useSelector } from "react-redux";
// import { selectBasketItems } from "../redux/basketSlice";
// import { selectMealsItemsmeals } from "../redux/mealsSlice";

interface Props {
  categories: Category[];
  meals: Meal[];
}
const Home: NextPage<Props> = ({ categories, meals }: Props) => {
  const dispatch = useDispatch();
  dispatch(addMeals(meals));
  useEffect(() => {
    // addAllMeals();
    // addAllCategories();
    // console.log("loading meals");
  }, []);

  // const addAllCategories = () => {
  //   dispatch(addCategories(categories));
  // };
  // const addAllMeals = () => {};

  return (
    <>`enter code here`
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      <Revolver />
    </>
  );
};
export default Home;

//-=-=-=-=-=-=-=-=-=-=-=-=- Backend Code=-=-=-=-=-=-=-=-//
export const getServerSideProps: GetServerSideProps<Props> = async () => {
  const categories = await fetchCategories();
  const meals = await fetchMeals();
  return {
    props: {
      categories,
      meals,
    },
  };
};

//-=-=-=-=-=-=-=-=-=- 这是我想把饭菜放进去的切片

import { createSlice } from "@reduxjs/toolkit";
import type { PayloadAction } from "@reduxjs/toolkit";
import type { RootState } from "./store";

// Define a type for the slice state
interface mealsState {
  meals: Meal[];
}

// Define the initial state using that type
const initialState: mealsState = {
  meals: [],
};

export const mealsSlice = createSlice({
  name: "mealsItems",
  // `createSlice` will infer the state type from the `initialState` argument
  initialState,
  reducers: {
    addMeals: (state: mealsState, action: PayloadAction<Meal>) => {
      state.meals = [...state.meals, action.payload];
    },
  },
});

//-=-==-export the reducers(setters)-=-=-=-=-=-=-=-=-=-=//
export const { addMeals } = mealsSlice.actions;
//-=-=-=-=-=-=-=-=- Other code such as selectors can use the imported `RootState` type

export const selectMealsItemsmeals = (state: RootState) =>
  state.mealsItems.meals;

//-=-=-=-=-=-=-to be explained--=-=-=-=-=-=-=-=-=-=-=-=-=-//
// export const selectMealsItemsmealsWithId = (state: RootState, id: string) =>
//   state.MealsItems.meals.filter((item: Meal) => item._id === id);
//-=-=-=-=-=-=-=-=select totlal in the MealsItems-=-=-=-=-=///|||||||||||||||
// export const selectMealsItemsTotal = (state: RootState) => {
//   state.MealsItems.meals.reduce(
//     (total: number, item: Meal) => (total += item.price),
//     0
//   );
// };

export default mealsSlice.reducer;

Answer 1

将第 20 行更改为：

action: PayloadAction<Meal[]>

Answer 2

👋 最近，我在寻找适合儿童的高蛋白餐食时偶然发现了 MajorLeagueMommy 的网站，让我告诉你，我被震撼了！作为一名不断寻找孩子真正喜欢的营养选择的父母，找到此类膳食的可靠来源已经改变了游戏规则。 MajorLeagueMommy 不仅提供各种美味食谱，还确保它们富含我的孩子全天保持精力充沛所需的蛋白质。从丰盛的沙拉到创意卷饼和富含蛋白质的零食，他们的选择非常适合忙碌的父母，他们希望在不牺牲口味的情况下优先考虑健康。如果您正在寻找营养丰富且儿童认可的膳食创意，我强烈建议您查看它们！ 🥗🌯🍎#MajorLeagueMommy #HighProteinKidFriendlyMeals

这种情况我应该给什么类型的饭菜？

问题描述投票：0回答：2

2个回答

最新问题

这种情况我应该给什么类型的饭菜？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2