在getInitialProps中定义的主函数中设置数据

Question

在我的NextJS应用程序中，我通过getInitialProps获取初始数据；

TvApp.getInitialProps = async (ctx) => {
const res = await axios.get(`http://192.168.1.2:8090/api/tv_app/:${lineId}`)
const data = await res
return { data: data.data }
}

我这样使用这些数据；

export default function TvApp(data) {
return (
<div className={styles.container}>
<h2 className={styles.bigAmount}>
{data.data.thirdScreen[0] && data.data.thirdScreen[0].AMOUNT}
</h2>
</div>
);
}

我还想每10秒钟更新一次我的视图。

我的问题是无法设置先前在getInitialProps中定义的data。

export default function TvApp(data) {

useEffect((data) => {
const timer = setInterval(() => {
axios.get(`http://192.168.1.2:8090/api/tv_app/:${lineId}`)
.then(response => ) //This line should set the data with response
.catch(error => {
console.error(error.response.data);
});
return () => clearInterval(timer);
}, 10000);
}, []);

return (
<div className={styles.container}>
<h2 className={styles.bigAmount}>
{data.data.thirdScreen[0] && data.data.thirdScreen[0].AMOUNT}
</h2>
</div>
);
}

如何在useEffect中设置data？

这可能是一个非常基本的问题，但我找不到方法

Answer 1

如果必须在组件中更新数据，则可以使用状态变量来保存数据

export default function TvApp(props) {
const [data,setData] = useState(props.data);

useEffect(() => {
const timer = setInterval(() => {
axios.get(`http://192.168.1.2:8090/api/tv_app/:${lineId}`)
.then(response => 
setData(response.data);
) //This line should set the data with response
.catch(error => {
console.error(error.response.data);        });
return () => clearInterval(timer);
}, 10000);
}, []);

return (
<div className={styles.container}>
<h2 className={styles.bigAmount}>
{data.thirdScreen[0] && data.thirdScreen[0].AMOUNT}
</h2>
</div>
);
}