Next.js 来自 GetServerSideProps 道具的实时价格更新

Question

I'am trying to fetch live price of bitcoin from CoinGecko.我正在尝试从 CoinGecko 获取比特币的实时价格。 I have async GetServerSideProps in index.js that works as intended, and i am passing return props to <Home /> further to <Main /> component, and finally to <Calculatorbuy /> component.我在 index.js 中有异步 GetServerSideProps 可以按预期工作，并且我将返回道具传递给<Home />进一步传递给<Main />组件，最后传递给<Calculatorbuy />组件。 Everything works, but i'm getting the price only once on the start.一切正常，但我一开始只得到一次价格。 What is the best way to get live price updates?获取实时价格更新的最佳方式是什么？ i tried to put props in setInterval inside <CalculatorBuy /> but it just going to pass the same value again and again.我试图将道具放在<CalculatorBuy />内的 setInterval 中，但它只会一次又一次地传递相同的值。 My files:我的文件：

index.js

export default function Home(props) {

  const {data} = props.result;

  return (
    <div className="container">
      <Head>
        <title>Kup BTC</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
      </Head>
      <Header />

      <Main data={data}/>

      <Footer />
    </div>
  )
}

export async function getServerSideProps(context) {
  const result = await coinGeckoClient.simple.price({
      ids: "bitcoin",
      vs_currencies: "pln",
  });
  return {
      props: {
          result
      },
  }
}

main.js

export default function Main(props) {
    const data = props.data;
    
    return (
        <main className="main">
                <div style={{ display: showMe?"block":"none" }}>
                    <Calculatorbuy data = {data} />
                </div>
        </main>
        )
}

calculatorbuy.js

export default function Calculatorbuy(props) {
    const data = props.data;
    const [value, setValue] = useState(0);
    const currentPrice = parseFloat(data.["bitcoin"].pln);
    console.log(currentPrice);
}

I would like to update the price in calculatorbuy every x seconds我想每 x 秒更新一次calculatorbuy 中的价格

Answer 1

getServerSideProps will make Next.js to generate your page on the server-side on each request using the data returned by getServerSideProps . getServerSideProps将使 Next.js 使用getServerSideProps返回的数据在每个请求的服务器端生成您的页面。 Your will only fetch the price on the server once per request.每个请求您只会在服务器上获取一次价格。

If you need to have live price update, you can use coinGeckoClient in an interval using setInterval in useEffect .如果您需要实时更新价格，您可以在coinGeckoClient中使用setInterval在间隔内使用useEffect 。

Here is how you would fetch the price on the client-side but you can add an interval function to wrap the following easily.这是您在客户端获取价格的方法，但您可以添加间隔 function 以轻松包装以下内容。

  const [price, setPrice] = useState();
  useEffect(() => {
    const fetchPrice = async () => {
      const result = await coinGeckoClient.simple.price({
        ids: "bitcoin",
        vs_currencies: "pln",
      });
      setPrice(result);
    };
    fetchPrice();
  })```

Next.js 来自 GetServerSideProps 道具的实时价格更新

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-04-07 18:54:25

Next.js 来自 GetServerSideProps 道具的实时价格更新

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-04-07 18:54:25

解决方案1
2 已采纳 2021-04-07 18:54:25