我在Next js中获取数据时遇到问题

bounty 8小时后到期。回答此问题可获得+100声望奖励。Zakaria Zhlat正在寻找规范答案：解决这道题中所有问题

在Next.js项目中，提供的代码从外部API端点获取数据，并将其作为props传递给名为Services的组件。服务组件使用接收到的数据根据当前URL路径名呈现页面的不同部分。
从以下API端点获取数据：http://back.menumizeme.com/api/get_business_info?business_id=1。
useEffect钩子用于在组件挂载时获取数据。useState钩子用于将获取的数据存储在数据状态变量中。
如果数据还没有被提取，则正在加载...消息显示。否则，服务组件将与数据属性一起呈现。
Services组件还使用了一些其他的prop，比如item和url，它们是从data prop派生出来的，用于根据当前的URL路径名呈现页面的不同部分。
在Services组件内部呈现的Header组件显示业务徽标和名称。CategorieItem和Categories组件分别用于显示类别和类别项的列表。MyOrder组件用于显示当前订单。

import React, { useEffect, useState } from "react";
import Services from "../../components/Services/Services";

const ServicesPage = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(
          "http://back.menumizeme.com/api/get_business_info?business_id=1"
        );
        const data = await response.json();
        setData(data);
      } catch (error) {
        console.error("Error fetching data", error);
      }
    }

    fetchData();
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div className="container h-auto">
      <Services data={data} />
    </div>
  );
};

export default ServicesPage;

服务项目

import Image from "next/image";
import Header from "./Header";
import CategorieItem from "@/components/Services/Categorie-Item";
import Categories from "./Categories-List";
import { useRouter } from "next/router";
import MyOrder from "./MyOrder";

const Services = ({ data }) => {
  const serverBaseURI = "http://back.menumizeme.com";
  const router = useRouter();

  // if (!data || !data.data || !data.data[0] || !data.data[0].business) {
  //   return <div>Loading....</div>;
  // }
  const item = data.data[0];

  return (
    <section className="flex">
      <Image
        src={`${serverBaseURI}/storage/${item.business.business_logo}`}
        className="object-cover w-screen h-full"
        alt="Business Logo"
        width={1000}
        height={1000}
      />
      <div className="absolute flex flex-col w-full">
        <Header item={item} url={serverBaseURI} />
        {router.pathname === "/services" && (
          <div className="mt-3 ">
            {item.category_infos.map((category, index) => (
              <Categories key={index} category={category} item={item} />
            ))}
          </div>
        )}

        {/* {router.query && (
          <div className="mt-3">
            <CategorieItem key={router.query} item={} />
          </div>
        )}
        {router.pathname === "/myOrder/myOrder" && (
          <div className="mt-3">
            <MyOrder />
          </div>
        )} */}
      </div>
    </section>
  );
};

export default Services;

import React, { useState } from "react";
import { useRouter } from "next/router";
import { menuLink } from "./constants";
import Image from "next/image";
import { close, menu, basket } from "./assets";
import { MdLocationOn, MdPhone } from "react-icons/md";

const Header = ({ item, url }) => {
  const router = useRouter();
  const [toggle, setToggle] = useState(false);

  return (
    <div className="flex flex-row w-full justify-between">
      <div className="flex">
        <Image
          src={toggle ? close : menu}
          alt="menu"
          className="w-[32px] h-[32px] mr-1 object-contain ml-[30px] mt-12 cursor-pointer"
          onClick={() => setToggle((prev) => !prev)}
        />
        <div
          className={`${
            toggle ? "flex" : "hidden"
          } bg-[#000000f1] absolute top-20 w-[98.5vw] sidebar z-[1]`}
        >
          <ul className="list-none flex flex-col justify-end items-center flex-1">
            {menuLink.map((nav, index) => (
              <li
                key={nav.id}
                className={`font-poppins font-semibold border-[#ffffff83] w-[98.5vw] cursor-pointer flex flex-col justify-center h-12 text-[18px] leading-7 text-white text-center hover:text-[#FAB25A] hover:font-bold hover:bg-[#fab25a2d] ${
                  index === menuLink.length - 1 ? "" : "border-b-[1px]"
                }`}
              >
                <a href={`#${nav.id}`}>{nav.title}</a>
              </li>
            ))}
          </ul>
        </div>
      </div>
      <div className="mt-10 flex flex-col">
        <Image
          src={`${url}/storage/${item.data.business_logo}`}
          className="object-contine"
          alt="Business Logo"
          width={1000}
          height={1000}
        />
        {router.pathname === "/services" && (
          <p className="font-Montserrat font-[700] text-lg text-[#FEFEFE] capitalize">
            {item.data.name} {item.data.businessType}
          </p>
        )}
        {router.pathname === "/services" && (
          <div className="flex-col mt-14 mx-2">
            <div className="flex flex-row mt-2">
              <MdLocationOn
                color="#A8A8A8"
                className="w-[20px] h-[20px] mt-1 mr-2"
              />
              <p className="font-Montserrat font-[400] text-lg text-[#A8A8A8]">
                {item.data.address}
              </p>
            </div>
            <div className="flex flex-row mt-2">
              <MdPhone
                color="#A8A8A8"
                className="w-[20px] h-[20px] mt-1 mr-2"
              />
              <p className="font-Montserrat font-[400] text-lg text-[#A8A8A8]">
                {item.data.phone_number}
              </p>
            </div>
          </div>
        )}
      </div>
      <div className="mr-[30px] mt-12">
        <Image src={basket} className="cursor-pointer" alt="Basket" />
      </div>
    </div>
  );
};

export default Header;

分类目录

import Image from "next/image";
import Link from "next/link";
import React, { useState } from "react";
import { useRouter } from "next/router";

const Categories = ({ category }) => {
  const router = useRouter();

  const [selectedCategory, setSelectedCategory] = useState(null);

  const handleCategoryClick = (category_id) => {
    setSelectedCategory(category_id);
    console.log(category_id);
  };

  return (
    <div className="flex flex-col">
      <Link href={`/services/${category.id}`} key={category.id}>
        <div className="flex mt-2 justify-center items-center cursor-pointer transition duration-300 ease-in-out hover:scale-110">
          {/* <Image
            src={item.logo}
            className="object-fill w-full h-[7.5rem]"
            alt={category.name}
          /> */}
          <div className="absolute w-full h-[7.5rem] flex flex-col justify-center items-center bg-[#00000054] ">
            <p className="font-Montserrat font-[700] text-[30px] leading-9 text-[#FEFEFE] capitalize ">
              {category.name}
            </p>
            <p className="font-Montserrat font-[400] text-[12px] text-[#FEFEFE] leading-3 capitalize mt-1">
              {category.description}
            </p>
          </div>
        </div>
      </Link>
    </div>
  );
};

export default Categories;

分类项目

import { resturant } from "@/constant/resturant";
import Image from "next/image";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import ModalOrder from "./Modal/ModalOrder";

const CategorieItem = ({ resturant }) => {
  const { query } = useRouter();
  const item = resturant;
  const [productsToShow, setProductsToShow] = useState([]);
  const [showModal, setShowModal] = useState(false);
  
  useEffect(() => {
    query?.params &&
      setProductsToShow(
        item.categories.find(
          (category) => parseInt(category.id) === parseInt(query?.params[0])
        )?.products || []
      );
  }, [query]);

  return (
    <section>
      <div className="flex flex-col">
        {productsToShow?.map((product, index) => (
          <div>
            <div
              key={index}
              className="flex flex-row w-[22rem] h-[11rem] justify-between item-center cursor-pointer mt-4 mx-auto "
              onClick={() => setShowModal(true)}
            >
              <div>
                <Image
                  src={product.image}
                  className="w-[11rem] h-[11rem] absolute cursor-pointer transition duration-300 ease-in-out hover:scale-110 rounded-full"
                />
              </div>
              <div className="flex flex-col justify-center pl-9 items-start w-[13rem] h-[8rem] bg-gradient-to-l from-[#ffffffb7] rounded-r-[13rem] my-auto ">
                <h2 className="font-Montserrat text-[#fff]  font-bold text-lg leading-5">
                  {product.name}
                </h2>
                <p className="font-Montserrat text-[#fff] font-[500] text-[12px] leading-4 my-2">
                  {product.description}
                </p>
                <p className="font-Montserrat text-[#fff] font-bold text-lg leading-5">
                  {product.price}
                </p>
              </div>
            </div>

            <div>
              <ModalOrder product={product} showModal={showModal} setShowModal={setShowModal}/>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

export default CategorieItem;

有谁能帮我吗？我犯了很多错误

我解决了我的问题：错误Ihave对象康廷数组，所以我做的时候通过的数据
所以更新后：

服务项目

import Image from "next/image";
import Header from "./Header";
import CategorieItem from "@/components/Services/Categorie-Item";
import Categories from "./Categories-List";
import { useRouter } from "next/router";

import MyOrder from "./MyOrder";


import { useEffect, useState } from "react";
import Loader from "../UI/Loader";

const Services = () => {
  const serverBaseURI = "http://back.menumizeme.com";
  const router = useRouter();

  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(
          "http://back.menumizeme.com/api/get_business_info?business_id=1"
        );
        const data = await response.json();
        setData(data);
      } catch (error) {
        console.error("Error fetching data", error);
      }
    }

    fetchData();
  }, []);

  if (!data) {
    return (
      <div className="centered-loder  w-screen  bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-[#ffd900dc] via-[#8feb17b9] to-[#ffd900dc]">
        <Loader />{" "}
      </div>
    );
  }

  const item = data.data;

  return (
    <section className="flex w-screen">
      <div className="relative h-screen w-screen">
        <Image
          src={`${serverBaseURI}/storage/${item.business_banner}`}
          className="object-cover !w-screen"
          alt="Business Logo"
          priority={false} // {false} | {true}
          fill
        />
      </div>

      <div className="absolute flex flex-col w-full">
        <Header item={item} url={serverBaseURI} />
        {router.pathname === "/services" && (
          <div className="mt-3 ">
            {item.categories.map((category) => (
              <Categories key={category.id} category={category} item={item} />
            ))}
          </div>
        )}

        {router.query && (
          <div className="mt-3">
            <CategorieItem key={router.query} item={item} />
          </div>
        )}
        {/* {router.pathname === "/myOrder/myOrder" && (
          <div className="mt-3">
            <MyOrder />
          </div>
        )}  */}
      </div>
    </section>
  );
};

export default Services;

分类

import Image from "next/image";
import Link from "next/link";
import React, { useEffect, useState } from "react";

const Categories = ({ category }) => {
  const serverBaseURI = "http://back.menumizeme.com";

  const categore = category.category_infos[0];

  return (
    <div className="flex flex-col">
      <Link href={`/services/${category.id}`} key={category.id}>
        <div className="flex mt-2 justify-center items-center cursor-pointer transition duration-300 ease-in-out hover:scale-110">
          <Image
            src={`${serverBaseURI}/storage/${category.logo}`}
            className="object-fill w-full h-[7.5rem]"
            alt={categore.name}
            width={175}
            height={175}
          />

          <div className="absolute w-full h-[7.5rem] flex flex-col justify-center items-center bg-[#00000054] ">
            <p className="font-Montserrat font-[700] text-[30px] leading-9 text-[#FEFEFE] capitalize ">
              {categore.name}
            </p>
            <p className="font-Montserrat font-[400] text-[12px] text-[#FEFEFE] leading-3 capitalize mt-1">
              {categore.description}
            </p>
          </div>
        </div>
      </Link>
    </div>
  );
};

export default Categories;

分类项目

import Image from "next/image";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import ModalOrder from "./Modal/ModalOrder";
import Link from "next/link";

const CategorieItem = ({ item }) => {
  const { query } = useRouter();
  const serverBaseURI = "http://back.menumizeme.com";
  const [productsToShow, setProductsToShow] = useState([]);
  const [selectProductInfo, setSelectProductInfo] = useState(null);
  const [showModal, setShowModal] = useState(false);

  useEffect(() => {
    let category;
    if (query?.params && item && item.categories) {
      category = item.categories.filter(
        (category) => parseInt(category.id) === parseInt(query?.params[0])
      );
    }
    setProductsToShow(category ? category[0].products || [] : []);
  }, [query]);

  const selectProduct = (product_info) => {
    setSelectProductInfo(product_info);
    setShowModal(true);
  };

  return (
    <section>
      <div className="flex flex-col ">
        {query?.params && (
          <div className="flex justify-center items-center ">
            {item.categories.map((category) => (
              <Link href={`/services/${category.id}`} key={category.id}>
                <div className="cursor-pointer  border-2 border-[#fff] text-white hover:text-black hover:bg-[#F8B162]  rounded-full  px-4 py-1 mx-4 ">
                  <div className="font-Montserrat   text-lg font-bold tracking-wider">
                    {category.category_infos[0].name}
                  </div>
                </div>
              </Link>
            ))}
          </div>
        )}

        {productsToShow.map(
          (product, index) => (
            (
              <div>
                <div
                  key={index}
                  className="flex flex-row w-[22rem] h-[11rem] justify-between item-center cursor-pointer mt-4 mx-auto "
                  onClick={() => selectProduct(product.product_infos[0])}
                >
                  <div>
                    <Image
                      src={`${serverBaseURI}/storage/${product.image}`}
                      className="w-[11rem] h-[11rem] absolute cursor-pointer transition duration-300 ease-in-out hover:scale-110 rounded-full"
                      alt="Product photo"
                      width={300}
                      height={300}
                    />
                  </div>
                  <div className="flex flex-col justify-center pl-9 items-start w-[13rem] h-[8rem] bg-gradient-to-l from-[#ffffffb7] rounded-r-[13rem] my-auto ">
                    {product.product_infos.length > 0 ? (
                      product.product_infos.map((product_info) => (
                        <>
                          <h2 className="font-Montserrat text-[#fff] font-bold text-lg leading-5">
                            {product_info.name}
                          </h2>
                          <p className="font-Montserrat text-[#fff] font-[500] text-[12px] leading-4 my-2">
                            {product_info.description}
                          </p>
                        </>
                      ))
                    ) : (
                      <p>No product information available.</p>
                    )}
                  </div>
                </div>
                {selectProductInfo && (
                  <div>
                    <ModalOrder
                      product={product}
                      productInfo={selectProductInfo}
                      showModal={showModal}
                      setShowModal={setShowModal}
                    />
                  </div>
                )}
              </div>
            )
          )
        )}
      </div>
    </section>
  );
};

export default CategorieItem;

我在Next js中获取数据时遇到问题

1条答案

相关问题

热门标签

最新问答