Next.js App Dir客户端组件GraphQL请求GraphCMS数据遇循环问题求助

问题根源 #

你遇到的无限循环是两个核心问题导致的：

• useEffect 未指定依赖数组，组件每次渲染都会触发数据请求，请求完成后调用setData又会触发组件重新渲染，形成循环。
• 组件定义和JSX返回存在语法错误，进一步加剧渲染异常。

修正方案 #

1. 给useEffect添加空依赖数组

空数组作为依赖时，useEffect只会在组件首次挂载时执行一次，彻底避免重复触发请求。

2. 修正组件定义语法

export default Home() 是错误写法，需改为 export default function Home()。

3. 修复JSX返回问题

map 回调中的JSX需要明确返回，要么添加return关键字，要么用圆括号替代大括号。

修正后的完整代码 #

GraphQL请求文件（index.js）

export async function getAllPosts() {
  const query = gql`
    query Posts {
      articles {
        id
        title
        excerpt
      }
    }
  `;
  const result = await request(graphqlAPI, query);
  return result.articles;
};

Home客户端组件

'use client'
import { useEffect, useState } from "react";
import { getAllPosts } from './path-to-your-graphql-file'; // 替换为实际文件路径

export default function Home() {
  const [data, setData] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      const posts = await getAllPosts();
      setData(posts);
    };
    fetchData();
  }, []) // 空依赖数组，仅挂载时执行

  return (
    <div>
      {data.map(post => (
        <div key={post.id}>
          <h1>{post.title}</h1>
          <p>{post.excerpt}</p>
        </div>
      ))}
    </div>
  )
}

额外提示 #

• 确保graphqlAPI已正确配置为GraphCMS的端点地址。
• 建议在fetchData中添加错误捕获，避免请求失败导致组件异常：

const fetchData = async () => {
  try {
    const posts = await getAllPosts();
    setData(posts);
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

内容的提问来源于stack exchange，提问作者tomess