这可能涉及到数据的异步加载和处理。在NextJS中,可以使用getStaticProps或getServerSideProps函数来从API获取数据,并在页面渲染之前进行预处理。然后将数据作为props传递给组件,以便在表格中显示。
以下是一个示例,其中使用getStaticProps函数从API获取数据,并将其作为props传递给带有表格的组件:
import React from 'react';
export default function Table({ data }) {
return (
Column One
Column Two
{data.map((row) => (
{row.column1}
{row.column2}
))}
);
}
export async function getStaticProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return {
props: {
data,
},
};
}
在上面的示例中,从API获取的数据通过props传递给Table组件,通过data.map()函数将其渲染到表格中。请注意,这是在服务器端进行的,因此页面的初始渲染将包含完整的数据,因此避免了异步加载的问题。