API 无法使用动态页面 NEXT js 获取数据

Question

动态页面正在工作，但未从任何 API 获取数据

我的 Next.js 动态页面遇到问题，该页面应该从 API 获取数据，但似乎并未这样做。尽管实现了获取数据的代码，该页面仍然是空的。我检查了 API 端点，它可以正常工作，因为它在直接访问时返回数据。有人可以帮我调试这个问题吗？下面是我的动态页面的代码片段。

这是我的动态页面代码 路径：src pp\Stocks[ticker]\page.js

"use client";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

const StockDetailsPage = () => {
  const router = useRouter();
  const [stockData, setStockData] = useState([]);

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

  const fetchData = async () => {
    try {
      const apiUrl = "http://localhost:4000/stocks";
      const response = await fetch(apiUrl);
      if (!response.ok) {
        throw new Error("Failed to fetch data");
      }
      const data = await response.json();
      console.log("API Response:", data); // Log the API response
      if (!data || !data.stocks || !Array.isArray(data.stocks)) {
        throw new Error("Invalid data format");
      }
      setStockData(data.stocks); // Assuming the data is structured with a "stocks" array
    } catch (error) {
      console.error("Error fetching data:", error);
      setStockData([]);
    }
  };

  return (
    <>
      <div className="bg-background dark:bg-Background flex flex-col pl-[15px] pr-[15px] sm:pl-[100px] sm:pr-[40px] pt-2 sm:pt-4">
        <h1 className="mb-2">Stock Data</h1>
        <div className="rounded-2xl mb-4 sm:mb-8 dark:bg-gradient-to-tl from-[#101010] dark:to-[#161616] border dark:border-[#252525] bg-white flex-grow text-center">
          {stockData.map((stock) => (
            <div key={stock.ticker_id} className="p-4">
              <h2>{stock.ticker_id}</h2>
              <p>{stock.company_name}</p>
              <p>Price: {stock.price}</p>
              <p>Change: {stock.change}</p>
              <p>Change Percent: {stock.change_percent}</p>
              <p>Previous Close: {stock.prev_close}</p>
              <p>Open: {stock.open}</p>
              <p>Low: {stock.low}</p>
              <p>High: {stock.high}</p>
              <p>52 Weeks High: {stock["52_weeks_high"]}</p>
              <p>52 Weeks Low: {stock["52_weeks_low"]}</p>
              <p>Market Cap: {stock.market_cap}</p>
              <p>Volume: {stock.volume}</p>
              <p>Average Volume (3 Months): {stock.avg_vol_3_months}</p>
              <p>Turn Over: {stock.turn_over}</p>
              <p>Range: {stock.range}</p>
              <p>Shares Outstanding: {stock.shares_outstanding}</p>
              <p>Shares Float: {stock.shares_float}</p>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

export default StockDetailsPage;```


I was trying w`your text`ith multiple APIs, working in the console only

Answer 1

从代码的外观来看，您似乎正在调用此API端点http://localhost:4000/stocks，但这看起来不像API端点路由的理想结构方式，您应该有类似“/api”的内容/stocks/{params.stockId}" 是指您有一个类似于 /api/stocks/[stockId] 的文件夹结构，该结构根据您对文件夹的命名而有所不同。 Nextjs 中默认随您的函数提供参数

const fetchData = async ({params}) => {
console.log(params)
}

尝试控制台记录你的参数，看看它给你什么