如何在Next.js中使用上下文API和GetServersideProps？
我正在尝试根据上下文API中给出的属性调用货币，但是每当我称呼它时，会得到错误：typeerror：无法读取null的属性（读取'usecontext'）。但是，当我在主页中调用它而不将其传递给getServersideProps工作正常。有人可以帮我解决这个问题吗？
import { CryptoState } from "../context/cryptoContext"
import { useContext } from "react";
const GetCurrency = async () => {
const { currency } = await useContext(CryptoState)
return currency
}
export default GetCurrency
import Head from 'next/head'
import GetCurrency from '../components/getCurrency';
export default function Home(jsonData) {
console.log(jsonData)
return (
<div className="bg-green-100 dark:bg-gray-800 pb-5 h-screen w-screen">
<Head>
<title>Crypto</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
</div>
)
}
export async function getServerSideProps(context) {
const currency = await GetCurrency();
const response = await fetch(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=${currency}&order=gecko_desc&per_page=10&page=1&sparkline=false&price_change_percentage=24h`)
return {
props: {
jsonData,
},
}
}
I am trying to call the currency according to the properties given in the context API, but whenever I call it will get Error: TypeError: Cannot read properties of null (reading 'useContext'). But when I call it in my home page without passing it to getServerSideProps it's working fine. Can someone please help me out to fix this issue?
import { CryptoState } from "../context/cryptoContext"
import { useContext } from "react";
const GetCurrency = async () => {
const { currency } = await useContext(CryptoState)
return currency
}
export default GetCurrency
import Head from 'next/head'
import GetCurrency from '../components/getCurrency';
export default function Home(jsonData) {
console.log(jsonData)
return (
<div className="bg-green-100 dark:bg-gray-800 pb-5 h-screen w-screen">
<Head>
<title>Crypto</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
</div>
)
}
export async function getServerSideProps(context) {
const currency = await GetCurrency();
const response = await fetch(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=${currency}&order=gecko_desc&per_page=10&page=1&sparkline=false&price_change_percentage=24h`)
return {
props: {
jsonData,
},
}
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这是关于客户端和服务器端代码的。 GetServersideProps在服务器端执行，并且上下文适用于客户端。您不会在服务器端获得客户端上下文。您可以将 swr 用于客户端数据获取。上下文将与 swr 顺利使用。
否则，您可以将货币存储在cookie中，并且可以从服务器端从cookie获取值。
It's about client and server side code. getServerSideProps execute in server side and context is for client side. You will not get client context in server side. You can use swr for client side data fetch. context will work smoothly with swr.
Otherwise you can store the currency in cookies and you can get the value from cookie in server side.