خطأ في التعرف على المعامل id في Next js

محمود سعداوي2 · 3 يوليو

السلام عليكم.

في الكود التالي:

"use client"
import React, { useEffect, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { FaArrowLeft } from 'react-icons/fa';
import { fetchProperty } from "@/utils/requests";

const PropertyPage = () => {
  const [property, setProperty] = useState(null)
  const [loading, setLoading] = useState(true)

  const { id } = useParams()
  console.log(id)

  useEffect(() => {
    const fetchPropertyData = async() => {

      if (!id) return

      try {
        const property = await fetchProperty(id)
        setProperty(property)
      } catch (error) {
        console.error('Error fetching property: ', error)
      } finally {
        setLoading(false)
      }

      if (property === null) {
        fetchPropertyData()
      }
    }
  }, [id, property])
  console.log(property)

  if (loading) return <h1>Loading...</h1>
  if (!property) return <h1> No Property Found </h1>
  return (
    <>
      <section>
        <div className="container m-auto py-6 px-6">
          <Link
            href="/properties"
            className="text-green-500 hover:text-green-600 flex items-center"
          >
            <FaArrowLeft className="mr-2" /> Back to Properties
          </Link>
        </div>
      </section>

      <section className="bg-green-50">
        <div className="container m-auto py-10 px-6">
          <div className="grid grid-cols-1 md:grid-cols-70/30 w-full gap-6">
            <aside className="space-y-4">
              property single page
            </aside>
          </div>
        </div>
      </section>
    </>
  );
};

export default PropertyPage;

تظهر على شاشة المستخدم Loading... والسبب هو أن قيمة loading: false.

للتوضيح:

route.js

export const GET = async (request, { params }) => {
  try {
    await connectDB();

    const property = await Property.findById(params.id);
    if (!property) return new Response("Property Not Found", { status: 404 });

    return new Response(JSON.stringify(property), { status: 200 });
  } catch (error) {
    console.log(error);
    return new Response("Something went wrong", { status: 500 });
  }
};

requests.js

const apiDomain = process.env.NEXT_PUBLIC_API_DOMAIN || null;

async function fetchProperty(id) {
  try {
    if (!apiDomain) {
      return null;
    }
    const res = await fetch(`${apiDomain}/properties/${id}`);
    if (!res.ok) {
      throw new Error("Failed to fetch data");
    }
    return res.json();
  } catch (error) {
    console.log(error);
    return null;
  }
}

أعتقد أن المشكل هو في عدم التعرف على NEXT_PUBLIC_API_DOMAIN

شكرا على مساعدتي في تجاوز هذا الخطأ

Mustafa Suleiman · 3 يوليو

تفقد هل المتغير البيئي NEXT_PUBLIC_API_DOMAIN قد تم تعريفه بشكل صحيح في ملف .env، وكمثال:

NEXT_PUBLIC_API_DOMAIN=http://localhost:3000

أو ضع ذلك في ملف next.config.js.

 
  env: {
    NEXT_PUBLIC_API_DOMAIN: 'http://localhost:3000',
  },
};

أيضًا تفقد أن استدعاء fetchProperty يتم بشكل صحيح وأنه يعيد البيانات المناسبة بإضافة بعض رسائل التصحيح للتأكد من أن الدالة تعمل كما هو متوقع.

بالمثل لـ useParams بإضافة رسالة تصحيح للتأكد من أن id يتم التعرف عليه بشكل صحيح.

"use client"
import React, { useEffect, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { FaArrowLeft } from 'react-icons/fa';
import { fetchProperty } from "@/utils/requests";

const PropertyPage = () => {
  const [property, setProperty] = useState(null);
  const [loading, setLoading] = useState(true);
  const { id } = useParams();

  console.log("Property ID: ", id);

  useEffect(() => {
    const fetchPropertyData = async () => {
      if (!id) return;

      try {
        const property = await fetchProperty(id);
        setProperty(property);
      } catch (error) {
        console.error('Error fetching property: ', error);
      } finally {
        setLoading(false);
      }
    };

    fetchPropertyData();
  }, [id]);

  console.log("Property Data: ", property);

  if (loading) return <h1>Loading...</h1>;
  if (!property) return <h1>No Property Found</h1>;

  return (
    <>
      <section>
        <div className="container m-auto py-6 px-6">
          <Link
            href="/properties"
            className="text-green-500 hover:text-green-600 flex items-center"
          >
            <FaArrowLeft className="mr-2" /> Back to Properties
          </Link>
        </div>
      </section>

      <section className="bg-green-50">
        <div className="container m-auto py-10 px-6">
          <div className="grid grid-cols-1 md:grid-cols-70/30 w-full gap-6">
            <aside className="space-y-4">
              property single page
            </aside>
          </div>
        </div>
      </section>
    </>
  );
};

export default PropertyPage;

ولنتفقد هل الدالة fetchProperty تعمل بشكل صحيح، بإضافة بعض الرسائل التصحيحية للتأكد من أن البيانات تأتي كما هو متوقع.

const apiDomain = process.env.NEXT_PUBLIC_API_DOMAIN || null;

async function fetchProperty(id) {
  try {
    if (!apiDomain) {
      console.error('API domain not set');
      return null;
    }
    const res = await fetch(`${apiDomain}/properties/${id}`);
    if (!res.ok) {
      throw new Error("Failed to fetch data");
    }
    return res.json();
  } catch (error) {
    console.log(error);
    return null;
  }
}

export { fetchProperty };