Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.(NEXT JS)
Question
i am having this problem in my nextJS project and its frustrating me... when i try to render a component in my _app.js. this is the value of the (this.props ==> {"response":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySUQiOjEsImVtYWlsIjoiYWRtaW5AYWRtaW4uY29tIiwiaXNQcm9maWxlQ29tcGxldGUiOm51bGwsInJvbGUiOiJBZG1pbiIsImlhdCI6MTU5MTQ4MDMwNX0.uDuxahTU6fVAaHjy1uu8BDbAoi0u9QVq1vk4wCLNfAg"})
my _app.js code
class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
return (
<div>
<div>
<Head> </Head>
</div>
<Component {...pageProps} />
</div>
);
}
}
export default MyApp;
My home page code
import withSession from '../lib/session';
const HomePage = async (props) => {
console.log(`i have entered here ${JSON.stringify(props.user)}`);
return (
<div>
<div className="p-4 shadow rounded bg-white">
<h1 className="text-purple-500 leading-normal">Next.js Finally</h1>
<p className="text-gray-500">with Tailwind CSS</p>
<div className="grid grid-cols-3 gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</div>
);
};
export const getServerSideProps = withSession(async ({ req, res }) => {
const user = await req.session.get('user');
if (user === undefined) {
res.setHeader('location', '/login');
res.statusCode = 302;
res.end();
return { props: {} };
}
return {
props: { user },
};
});
export default HomePage;
this is the error i get
Server Error Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. in HomePage (at _app.js:32) in MyApp in Unknown in Context.Provider in Context.Provider in Context.Provider in AppContainer
2 answers
solution1
0 2020-06-07 09:32:08
As you've seen that your Component is undefined. So you can do something like this,
<>
{Component && pageProps && <Component {...pageProps}/>
</>
Now this will guard that your component will not render if these are undefined.
And I assume that once your props will be resolved by parent component ie your Homepage, it will automatically inform App component that it's props are changed and it needs to re-render it. Provided you take these as props in App component.
solution2
0 2020-06-12 09:36:52
I believe the issue is that you're using "const user = await req.session.get('user');" while it should be "const user = req.session.get('user');", let me know if that helps (author of next-iron-session here).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.