[英]Objects are not valid as a React child error in _document.tsx [Next.js]
当我尝试使用以下代码访问页面时:
export const getStaticProps = async (context: any) => {
const res = await fetch(
`https://pokeapi.co/api/v2/move/${context.params.move}`
);
const move = await res.json();
return {
props: {
move,
},
};
};
export const getStaticPaths = async () => {
const res = await fetch(`https://pokeapi.co/api/v2/move?limit=843`);
const moves = await res.json();
const movenames = moves.results.map((obj: any) => obj.name);
const paths = movenames.map((movename: string) => ({
params: {
move: movename,
},
}));
return { paths, fallback: false };
};
我在_document.tsx
文件中遇到错误。 我没有自定义的一组,所以错误在默认的_document.tsx
文件中。
这是我得到的错误:错误图像
Error: Objects are not valid as a React child (found: object with keys {name, url}). If you meant to render a collection of children, use an array instead.
../../pages/_document.tsx (89:33) @ Function.getInitialProps
87 | }
88 |
> 89 | const { html, head } = await ctx.renderPage({ enhanceApp })
| ^
90 | const styles = [...flush()]
91 | return { html, head, styles }
92 | }
我花了最后一个小时尝试调试和寻找解决方案,但我找不到其他人遇到同样的问题。
我找到了答案。 与错误消息相反,这是因为我不小心尝试在我的 JSX 中渲染 object。 我把obj.type
而不是obj.type.name
。 哎呀。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.