getInitialProps 在 Next.js 中导入数据

Question

我在 NEXT.js 中有一个简单的页面，例如：

function Page({ stars }) {
    return <div>Next stars: {stars}</div>;
}

Page.getInitialProps = async ({ req }) => {
    const res = await fetch('https://api.github.com/repos/zeit/next.js');
    //console.log(res) shows data at-it-is, -raw
    const json = await res.json();
    return { stars: json.stargazers_count };
};

export default Page;

和来自 API https://directmarketaccess.ru/api/curves/curves/3 的数据集在完全相同的视图中，Google React Chart 所需的格式如下：

[
   [header1,..headerX]
   ...
   [valueY,...valueY]
]

它不是 object 和 {} 它是 array 的 arrays

According to the dataset from Google Charts Demo line chart - array of arrays is fine

我花了将近两天的时间来理解这个案例和这样的教程：

并从 google/SO/etc 中搜索答案。可能我不明白某些事情或遗漏了一件微不足道的事情，但在某些情况下，即使在 console.log(res) 阶段之后，使用 getInititalProps 导入数据后，我每次尝试导入所有内容时都会收到错误' 具有属性的对象。有趣的是，在所有实验之后 console.log(res) 正确显示数据，即使服务器拒绝为我呈现页面。那么，如果必要的数据是 string、number、array，而不是 object（让我们跳过 typeof array === object 的部分）。如何在有或没有 getInitialProps 的情况下以必要的格式导入数据？

有没有什么方法可以按原样在页面上导入数据（例如从其他文件中的异步函数，连接到数据库（mongo）并从中接收数据）或者我总是应该使用 API 中的 fetch 应该用 {prop: value} 模型发送给我 object？

Answer 1

您可以将任何类型的数据作为对象的属性，包括数组的数组。

只需获取数据，在getInitialProps、return中为：

function Page({ data }) {
    // render your chart here with `data`
}

Page.getInitialProps = async ({ req }) => {
    const res = await fetch(GOOGLE_CHARTS_API);
    const json = await res.json(); // `json` is your array of arrays of data
    return { data: json };
};

export default Page;

getInitialProps 在 Next.js 中导入数据

getInitialProps import data in Next.js

javascript

reactjs

next.js