我正在关注 Next.js tutorial for fetching data
但与教程不同,我使用的是axios
。问题是 getInitialProps
没有得到我想要的数据。
代码如下:
import axios from "axios";
import Link from "next/link";
const Body = props => (
<div>
<h1>Shows</h1>
<ul>
{props.data.map(({ show }) => (
<li key={show.id}>
<Link as={`/p/${show.id}`} href={`/post?title=${show.title}`}>
<a>{show.name}</a>
</Link>
</li>
))}
</ul>
</div>
);
Body.getInitialProps = async function() {
const res = await axios.get("https://api.tvmaze.com/search/shows?q=batman");
const data = await res.data;
console.log(`Show data fetched. Count: ${data.length}`);
return {
data: data
};
};
export default Body;
对我来说,代码看起来不错,但错误 Unhandled Rejection (TypeError): Cannot read property 'map' of undefined
不断发生。
最佳答案
我已经解决了这个问题。
它的发生是因为我违反了一个简单的规则。
根据 next.js document , 有一张纸条说
注意:getInitialProps
不能在子组件中使用。仅在页面
中。
所以当我在 index.js
中获取数据时,它成功地获取了我想要的数据。
以为我可以在任何组件中使用 getInitialProps
,就像 componentDidMount
一样。
这是个问题。
关于javascript - Next.js 中的 getInitialProps 没有从服务器获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54867560/