NextJS客户端组件初始渲染时Fetch请求未触发问题求助

1. 客户端组件不能定义为异步函数 #

你的Client_Component标注了"use client"但同时用async声明，这会导致客户端渲染逻辑异常，useEffect无法正常触发。React客户端组件（带"use client"）不能是异步函数，直接移除async关键字即可。

2. 状态更新变量名不匹配 #

你声明的状态更新函数是setData，但在fetchData里调用了未定义的setGames，导致数据无法更新到状态中。需要把setGames改为setData。

3. 列表渲染的键值与数据传递错误 #

• map循环中使用key={data.id}，这里的data是整个数组，应该用当前循环项game.id作为唯一键值
• 传递给Cards组件的data={data}是整个数组，应该传递当前循环项game

修正后的客户端组件代码 #

"use client";
import React, { useState, useEffect } from "react";
import Pagination from "@mui/material/Pagination";
import Cards from "./Cards";
import { CardType } from "../interfaces/InterfaceTypes";
import axios from "axios";

// 移除async关键字
export default function Client_Component() {
  const [data, setData] = useState<CardType[]>([]); // 添加类型约束提升代码安全性

  async function fetchData(page: number) {
    try {
      const response = await axios.get(`/api/fetchData?page=${page}`);
      // 修正状态更新函数名
      setData(response.data.results);
    } catch (err) {
      console.error("数据获取失败:", err);
    }
  }

  useEffect(() => {
    fetchData(1);
  }, []);

  const onPageChange = (event: React.ChangeEvent<unknown>, value: number) => {
    fetchData(value);
  };

  return (
    <div className="mt-5 flex flex-wrap justify-center ">
      <Pagination
        count={10}
        variant="outlined"
        shape="rounded"
        onChange={onPageChange}
      />
      <div className="mt-5 flex flex-wrap justify-center px-36 py-3">
        {/* 修正key和传递给Cards的数据 */}
        {data.map((game: CardType) => (
          <Cards key={game.id} data={game} />
        ))}
      </div>
    </div>
  );
}

额外建议 #

• 在fetchData中添加错误捕获，方便调试请求失败的情况
• 保持状态变量与更新函数的命名一致性，避免类似的低级错误

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