I am clicking a link from the following component:

我正在单击以下组件中的链接：

import React from "react";
import { FeaturedArticle } from "@/data/featureArticle";
import FeaturedArticleComponent from "./featured-article";
import Link from "next/link";

interface FeaturedArticlesContainerProps {
    articles: FeaturedArticle[];
}

const FeaturedArticlesContainer: React.FC<FeaturedArticlesContainerProps> = ({
    articles,
}) => {
    return (
        <section className="">
            <div className="grid grid-cols-1">
                {articles.map((article) => (
                    <Link key={article.title} href={`/feature/article/${article.urlSlug}`}>
                        <FeaturedArticleComponent article={article} />
                    </Link>
                ))}
            </div>

        </section>
    );
};

export default FeaturedArticlesContainer;

the folder structure for the pages that i want to open is in the following structure:

我要打开的页面的文件夹结构如下：

The feature pages has the following component:

功能页具有以下组件：

"use client";

import { useParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import { getFeatureArticleBySlug, FeaturedArticleDetail } from '@/data/featureArticle';

export default function FeatureArticleDetail() {
  const { slug } = useParams() as { slug: string };
  const [featuredArticle, setFeaturedArticle] = useState<FeaturedArticleDetail | null>(null);

  useEffect(() => {
    async function fetchData() {
      try {
        // Fetch featured articles from the graph request
        const featuredArticleData = await getFeatureArticleBySlug(slug);
        setFeaturedArticle(featuredArticleData);

        console.log("featuredArticle", featuredArticle);

      } catch (error) {
        console.error('Error fetching data', error);
      }
    }

    fetchData();
  }, []);



  return (
    <div className="container mx-auto p-4">
      {featuredArticle && (
        <article className="max-w-3xl mx-auto">
          <h1 className="text-3xl font-bold mb-4">{featuredArticle.title}</h1>
          <p className="text-gray-600 mb-4">{featuredArticle.createdAt}</p>
        </article>
      )}
    </div>
  );
}

However this component is causing inconsistency in data, in the following screenshot of console.log. There is inconsistency in the data.

然而，此组件导致数据不一致，如下面的console.log屏幕截图所示。数据中有不一致之处。

In the first console.log set from getFeatureArticleBySlug method, the data has been appropriately fetched from the graph request, however, useEffect has not set the setFeaturedArticle.

在从getFeatureArticleBySlug方法设置的第一个console.log中，已经从图形请求中适当地获取了数据，然而，useEffect没有设置setFeatured文章。

I am able to get the data and console from the following graph-request

我能够从下面的图请求中获得数据和控制台

export const getFeatureArticleBySlug = async (slug: string): Promise<FeaturedArticleDetail | null> => {
  const query = `
      query BlogBySlug($slug: String!) {
        featuredArticles(
          where: {urlSlug: $slug}
        ) {
          title
          createdAt
          keywords
          publishedBy {
            name
            picture
          }
          urlSlug
          image {
            url
          }
          description {
            html
          }
        }
      }
    `;

  const client = new GraphQLClient(endpoint);

  try {
    const data = await client.request<{ featuredArticles: FeaturedArticleDetail | null }>(
      query,
      {
        slug,
      }
    );
    console.log("query", data.featuredArticles)
    return data.featuredArticles || null; // Return null if blog is not found

  } catch (error) {
    throw new Error(`Error fetching blog by slug: ${error}`);
  }
};

But the featuredArticle has been set as null most of the time, due to that the data are not being loaded on the dom.

但是，由于未将数据加载到DOM上，因此Featured文章在大多数情况下都被设置为空。

I cannot find what might be causing this issue in my application.

我在应用程序中找不到可能导致此问题的原因。