1

我最近一直在尝试使用 NextJS 创建一个 Web 应用程序。我知道一些 Web 开发的基础知识，但是在使用 NextJS 时我有点迷茫，因为我之前也没有做过任何 React。

我尝试从 API 获取数据并在我的页面中使用这些数据。我有点挣扎，但最后我得到了它的帮助getServerSideProps。

我的问题是，如何getServerSideProps在我的应用程序中多次使用，以便获取许多其他路由？我尝试getServerSideProps在不同的文件中使用它，在一个函数中使用它的响应，然后我将其导出为一个组件并使用它，这样我就可以“获取 getServerSideProps 响应的组件”，如果它有意义的话，但是在尝试做的时候有很多不同的错误所以。

有人可以解释它实际上是如何工作的以及我如何解决我的问题，如果它不能那样工作，我怎样才能让它工作？

这是使用 Coinbase 的 API 的示例：

import { useState } from 'react'
import fetch from 'isomorphic-fetch'

export const getServerSideProps = async () => {

  const res = await fetch('https://api.coinbase.com/v2/prices/ETH-USD/buy')
  const data = await res.json()

  return {
    props: {
      ethprice: data
    }
  }
};

然后我在 Home 函数中使用“ethprice”，例如：

export default function Home({ ethprice }) {
  return (

[页面内容、div、文本等...]

  {etherprice.data.amount}

谢谢！

4

1 回答 1

0

getServerSideProps特定于该特定文件，您不能以任何您想要的方式使用它。

const Example = (props) => {
  return // this is your component
}

export const getStaticProps = async () => {
  // this will provide props specifically for 'Example'
}

不止于此，getStaticProps只会在静态页面生成时运行一次，并且永远不会再运行一次，并且仅获取该特定组件的道具。因此，您无法从中获取实时数据，只能获取生成页面所需的数据（如页面标题）。

getServerSideProps如果您正在寻找可以在运行时获取道具的更动态的东西，您可以看看。之后，如果需要，您可以将这些道具传递给孩子。

于 2021-08-13T14:26:29.207 回答