我刚刚开始学习 Next.js 框架。
我需要帮助来解决我现在不明白的问题。在普通的 Vanilla JavaScript 和 React 中,我可以使用
setInterval
方法以 HTML 形式显示生成的 API。
我的 API 每 3 秒更改一次数据。我想将这些可变数据合并到我的 Next.js 应用程序中。
下面我将这两个 API 组合成一个 props,以将数据传输到其他组件。
export async function getServerSideProps(context) {
const [twoDApiRes, saveApiRes] = await Promise.all([
fetch(_liveResult),
fetch(_localTxt),
]);
const [twoDApi, saveApi] = await Promise.all([
twoDApiRes.json(),
saveApiRes.text(),
]);
// Regex
let csv_data = saveApi.split(/\r?\n|\r/);
// Loop through
const retrieveData = csv_data.map((el) => {
let cell_data = el.split(',');
return cell_data;
});
return {
props: { twoDApi, retrieveData },
};
}
要知道的主要事情是您想要在 Next.js 中每三秒更改数据
getServerSideProps
。
您可以使用
useEffect
钩子每 3 秒刷新一次数据。
// This function will return Promise that resolves required data
async function retrieveData() {
// retrieves data from the server
}
function MyPage() {
const [data, setData] = useState();
const [refreshToken, setRefreshToken] = useState(Math.random());
useEffect(() => {
retriveData()
.then(setData)
.finally(() => {
// Update refreshToken after 3 seconds so this event will re-trigger and update the data
setTimeout(() => setRefreshToken(Math.random()), 3000);
});
}, [refreshToken]);
return <div>{data?.name}</div>
}
react-query
库和 {refetchInterval: 3000}
选项每 3 秒重新获取数据。
这是使用 react-query 的示例。
可以在next js 13或latest中每3秒获取一次数据
import React, { useEffect } from 'react';
const Page = () => {
const [data, setData] = useState(null);
useEffect(() => {
const interval = setInterval(() => {
fetch(`https://api.coincap.io/v2/assets/bitcoin`, { cache: 'no-store' })
.then(res => res.json())
.then(data => setData(data));
}, 3000);
return () => clearInterval(interval);
}, []);
return (
<>
<div>
<p>Symbol: {data?.data?.symbol}</p>
<p>Name: {data?.data?.name}</p>
<p>Price: {data?.data?.priceUsd}</p>
<p>Market Cap: {data?.data?.marketCapUsd}</p>
</div>
</>
);
};
export default Page;