[英]Objects are not valid as a React child error in _document.tsx [Next.js]
When I try to access the page with the following code:当我尝试使用以下代码访问页面时:
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 };
};
I get an error in the _document.tsx
file.我在
_document.tsx
文件中遇到错误。 I don't have a custom one set, so the error is in the default _document.tsx
file.我没有自定义的一组,所以错误在默认的
_document.tsx
文件中。
Here's the error I get: Error Image这是我得到的错误:错误图像
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 | }
I've spent the last hour trying to debug and find solutions, but I couldn't find anyone else with the same issue.我花了最后一个小时尝试调试和寻找解决方案,但我找不到其他人遇到同样的问题。
I found the answer.我找到了答案。 Contrary to the error message, this was because I accidentally tried to render an object in my JSX.
与错误消息相反,这是因为我不小心尝试在我的 JSX 中渲染 object。 I put
obj.type
instead of obj.type.name
.我把
obj.type
而不是obj.type.name
。 Oops.哎呀。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.