如何在 Next.js 中使用 context API 和 getServerSideProps？

Question

如何在 Next.js 中使用 context API 和 getServerSideProps？

Emm*_*zie 6 reactjs server-side-rendering next.js react-context

我试图根据上下文 API 中给出的属性来调用货币，但是每当我调用它时，它都会得到Error: TypeError: Cannot read properties of null (reading 'useContext'). 但是，当我在主页中调用它而不将其传递给getServerSideProps它时，它工作正常。有人可以帮我解决这个问题吗？

import { CryptoState } from "../context/cryptoContext"
import { useContext } from "react";

const GetCurrency = async () => {
    const { currency } = await useContext(CryptoState)
    return currency
}

export default GetCurrency

Run Code Online (Sandbox Code Playgroud)

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,
    },
  }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 5

这是关于客户端和服务器端代码的。getServerSideProps 在服务器端执行，上下文用于客户端。您不会在服务器端获得客户端上下文。您可以使用swr进行客户端数据获取。context 将与swr顺利配合。

否则，您可以将货币存储在cookie中，然后您可以从服务器端的cookie中获取值。

归档时间：	4 年，4 月前
查看次数：	13195 次
最近记录：	3 年，10 月前