Javascript 如何在next.js中显示api页面之间的json值？

我有一个api页面

secured.js

（其中我详细说明了用户会话数据）和它的对应普通页面

secured.js

（其中我显示了api页面中详细说明的内容）

这是api页面secured.js：

const {google} = require('googleapis');
import fetch from 'isomorphic-unfetch'
import { getSession } from 'next-auth/client'

const secret = process.env.SECRET

export default async (req, res) => {
  const session = await getSession({ req });
  const token = JSON.stringify(session.token);

  var tokenUrl = `https://www.googleapis.com/youtube/v3/subscriptions?part=snippet%2CcontentDetails&mine=true&key=<key>&access_token=${token}`;
  tokenUrl = tokenUrl.replace(/"/g, '');
  const url = await fetch(tokenUrl);
  const data = await url.json();

  if (session) {
    res.send({ content: JSON.stringify(data.items) })
  } else {
    res.send({ error: 'You must be sign in to view the protected content on this page.' })
  }
}

import { useState, useEffect } from 'react'
import { useSession } from 'next-auth/client'
import Layout from '../components/layout'
import AccessDenied from '../components/access-denied'

export default function Page () {
  const [ session, loading ] = useSession()
  const [ content , setContent ] = useState()

  // Fetch content from protected route
  useEffect(()=>{
    const fetchData = async () => {
      const res = await fetch('/api/examples/protected')
      const json = await res.json()
      if (json.content) { setContent(json.content) }
    }
    fetchData()
  },[session])

  // When rendering client side don't display anything until loading is complete
  if (typeof window !== 'undefined' && loading) return null

  // If no session exists, display access denied message
  if (!session) { return  <Layout><AccessDenied/></Layout> }

  // If session exists, display content
  return (
    <Layout>
      <h1>Your favorite Channels</h1>
      <div>{content}</div>
    </Layout>
  )
}

但它说“内容”是未定义的

json看起来像是这样做的

console.log（data）

：

---

问题在于显示的逻辑。将有一段时间定义您的会话，但尚未从后端检索您的内容

所以应该是这样的

  // When rendering client side don't display anything until loading is complete
  if (typeof window !== 'undefined' && loading) return null

  // If no session exists, display access denied message
  if (!session) { return  <Layout><AccessDenied/></Layout> }
  // now retrieving from the backend
  if (!content) { return <div>Retrieving from backend</div> }

//呈现客户端时，在加载完成之前不显示任何内容
if（typeof window！=“未定义”&&loading）返回null
//如果不存在会话，则显示“访问被拒绝”消息
if（！session）{return}
//现在正在从后端检索
如果（！content）{返回从后端检索}

问题在于您的显示逻辑。将有一段时间定义您的会话，但尚未从后端检索您的内容

所以应该是这样的

  // When rendering client side don't display anything until loading is complete
  if (typeof window !== 'undefined' && loading) return null

  // If no session exists, display access denied message
  if (!session) { return  <Layout><AccessDenied/></Layout> }
  // now retrieving from the backend
  if (!content) { return <div>Retrieving from backend</div> }

//呈现客户端时，在加载完成之前不显示任何内容
if（typeof window！=“未定义”&&loading）返回null
//如果不存在会话，则显示“访问被拒绝”消息
if（！session）{return}
//现在正在从后端检索
如果（！content）{返回从后端检索}

它似乎不起作用，您看到的注释逻辑由next auth的示例存储库采用，事实上，如我所述，如果我不迭代，内容将返回json数据。mapit似乎不起作用，您看到的注释逻辑由next auth的示例存储库采用，事实上，如我所述，如果我不遍历.map，内容将返回json数据。你能在

if（json.content）{setContent（json.content）}

之前在你的安全页面中登录

console.log（json）

吗？嗨，谢谢你的回复，它会记录：[object object]（仅在浏览器控制台中，没有日志服务器端）那么

console.log呢（json.content）

？以及

console.log（typeof json.content）

？两个日志：未定义我认为您需要使用

console.log（json.stringify（json））

来确定它是什么。您能在

if（json.content）{setContent（json.content）}之前记录
console.log（json）

在您的页面secured.js？您好，谢谢您的回复，它会记录：[object object]（仅在浏览器控制台中，没有日志服务器端）那么

console.log（json.content）

？以及

console.log（typeof json.content）

的类型是什么？两个日志：未定义我认为您需要使用

console.log（json.stringify（json））

找出它是什么。

  // When rendering client side don't display anything until loading is complete
  if (typeof window !== 'undefined' && loading) return null

  // If no session exists, display access denied message
  if (!session) { return  <Layout><AccessDenied/></Layout> }
  // now retrieving from the backend
  if (!content) { return <div>Retrieving from backend</div> }