next.js 下一个js 13本地获取返回500 -如何使工作与上下文？

nvbavucw 于 2023-08-04 发布在其他

关注(0)|答案(1)|浏览(128)

目前正在尝试切换到nextjs 13，在获取返回时遇到了问题。我正在使用新的AppRouter，文件夹结构如下所示：

/app
  /context
    index.tsx
  /measurement
    route.ts

字符串
我有一个上下文提供程序/app/context/index.tsx：

export const MeasurementContext = createContext([]);

const fetcher = (...args) => fetch(...args);

const MeasurementProvider = ({ children }) => {
  const [elements, setElements] = useState([]);
  const [useSwr, setUseSwr] = useState(false);
  const { data, isLoading, error } = useSWR(useSwr ? "/measurement" : null, fetcher);

  useEffect(() => {
    if (!elements.length) {
      setUseSwr(true);
    }
  }, [elements]);

  useEffect(() => {
    setUseSwr(false);
    data && setElements(data);
  }, [data]);

  return <MeasurementContext.Provider value={elements}>{children}</MeasurementContext.Provider>;
};

export default MeasurementProvider;

型
路由处理器/app/measurement/route.ts：

export async function GET() {
  try {
    const data = await getMeasurements();

    if (data.length) {
      return data;
    }
  } catch (e) {
    console.error(e, "error msg");
  }
}

型
我看到一个有效的返回数据从路由，但在上下文提供程序，我得到了一个500状态与内部服务器错误。
这是我尝试过的：

使用NextResponse以json形式返回数据
我尝试使用通用的fetch和移动fetch函数到几个组件来测试响应的差异

如何在NextJS 13中将本地获取的路由数据与React上下文结合起来？

next.js

来源：https://stackoverflow.com/questions/76608434/nextjs13-local-fetch-returns-500-how-to-make-work-with-context

1条答案

按热度按时间

nuypyhwy1#

看起来您可能错过了将数据作为路由处理程序中的NextResponse对象返回的步骤。
在/app/measurement/route.ts文件中，您应该使用NextResponse.json（）返回数据。以下是您的操作方法：

import { NextResponse } from 'next/server'

export async function GET() {
  try {
    const data = await getMeasurements();

    if (data.length) {
      return NextResponse.json(data);
    }
  } catch (e) {
    console.error(e, "error msg");
  }
}

字符串
这将确保数据作为JSON响应返回，然后可以由上下文提供程序使用。
此外，确保上下文提供程序中的fetcher函数正确处理响应并将其转换为JSON。下面是一个示例，说明你可以如何做到这一点：

const fetcher = async (...args) => {
  const res = await fetch(...args);
  if (!res.ok) {
    throw new Error('An error occurred while fetching the data.');
  }
  return res.json();
};

型
如果响应状态不正常（200-299），这个fetcher函数将抛出一个错误，否则它将以JSON的形式返回响应数据。这可以帮助您捕获和处理SWR钩子中的错误。

赞(0）回复(0）举报 2023-08-04

我来回答

next.js 下一个js 13本地获取返回500 -如何使工作与上下文？

1条答案

相关问题

热门标签

最新问答