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

Question

我正在尝试从 CoinGecko 获取比特币的实时价格。 我在 index.js 中有异步 GetServerSideProps 可以按预期工作，并且我将返回道具传递给<Home />进一步传递给<Main />组件，最后传递给<Calculatorbuy />组件。 一切正常，但我一开始只得到一次价格。 获取实时价格更新的最佳方式是什么？ 我试图将道具放在<CalculatorBuy />内的 setInterval 中，但它只会一次又一次地传递相同的值。 我的文件：

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);
}

我想每 x 秒更新一次calculatorbuy 中的价格

Answer 1

getServerSideProps将使 Next.js 使用getServerSideProps返回的数据在每个请求的服务器端生成您的页面。 每个请求您只会在服务器上获取一次价格。

如果您需要实时更新价格，您可以在coinGeckoClient中使用setInterval在间隔内使用useEffect 。

这是您在客户端获取价格的方法，但您可以添加间隔 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