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的{{1}}，而是{}的{{1}}

根据Google图表Demo line chart中的数据集-数组数组很好

我花了将近两天的时间来理解这种情况以及诸如此类的教程：

并从google / SO / etc中搜索答案。可能我听不懂或错过了一些琐碎的事情，但是在某些情况下，即使在array阶段之后，使用arrays导入数据后，每次尝试导入所有不正确的内容时，我都会收到错误消息不是具有属性的对象。有趣的是，在所有实验getInititalProps之后，即使服务器拒绝为我渲染页面，也能正确显示数据。因此，如果必要的数据是console.log(res)，console.log(res)，string，而不是number，该怎么办（请跳过typeof array === object的部分）。如何在必要的格式下导入或不导入array来导入数据？

是否有任何方式可以按原样在页面上导入数据（例如，从其他文件中的异步函数导入，连接到DB（mongo）并从中接收数据），或者我总是应该使用object来自API，应该向我发送getInitialProps的{{1}}模型吗？

Answer 1

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

只需获取数据，然后在getInitialProps中将其返回为：

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中导入数据

1 个答案: