I have been looking at this piece of code for over 2 days now, and i have not been able to locate my Hydration error. It is driving me crazy. Could some one maybe take a look at it for me? Are there any tips and tricks to spot these kind of errors more quickly, would love to know!
I'am using nextjs and using axios for the get resquest
These are the errors: Error: Hydration failed because the initial UI does not match what was rendered on the server.
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
react-dom.development.js?ac89:19849 Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
export async function getStaticProps() {
try {
const res = await axios.get('https://open.data.amsterdam.nl/Festivals.json')
const events = res.data;
return {
props: {
events: events.slice(0, 10)
}
}
} catch (error) {
console.log(error)
}
}
function EventsCards({events}) {
return (
<div>
<a id="pressable-card max-w-md">
<div id="featured-event-container" className="bg-black rounded-md bg-opacity-20 bg-blur-sm max-w-xs shadow-lg">
<div id="event-banner">
<img className="max-w-lg w-full h-full" src={events.media[0].url }/>
</div>
<div className="text-white pl-2">
<h1 className="text-lg font-medium text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">{events.title}</h1>
<a className="text-sm uppercase">{events.title}</a>
<a className="text-xs text-">Friday 20 Jan | 13:00 - 02:00</a>
</div>
<div className="py-2 px-2">
<p className="text-slate-200 font-normal border-[1px] py-[2px] px-[4px] rounded-lg border-slate-400 w-8 text-[8px]">Techno</p>
</div>
</div>
</a>
</div>
)
}
function Events({events}) {
return (
<div className="bg-gradient-to-t from-gray-500 to-gray-900 h-full bg-blur-sm pt-2">
<div className="max-w-6xl mx-auto">
<div className="px-8 ">
<div className="flex">
<h1 className="text-white font-regular opacity-100 tracking-wider sm:text-xl md:text-2xl">Featured events in Amsterdam</h1>
<div className="pl-2 my-auto">
<img className="rounded-full w-8 h-8 md:w-6 md:h-6 border-gray-400" src="https://www.fotw.info/images/n/nl.gif"></img>
</div>
</div>
<ul className="grid grid-cols-1 md:grid-cols-2 pt-4 md:w-full">
<div id="featured-wrapper" className="bg-black rounded-md bg-opacity-20 bg-blur-sm max-w-xs shadow-lg">
<a id="pressable-card max-w-md">
<div id="featured-event-container">
<div id="event-banner">
<img className="max-w-lg max-h-lg w-full h-full" src='https://d1as2iufift1z3.cloudfront.net/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaWpqIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--696c8f363a91d0501e8ae333fc9d42e5fd9c225f/ERT_HOLLAND_SIGNUP_banner (1).jpg?proxy=true'></img>
</div>
<div className="text-white pl-2">
<h1 className="text-lg font-medium text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">El Row Town 2022 - Holland</h1>
<a className="text-sm uppercase">{events.title}</a>
<a className="text-xs text-">Friday 1 Jan | 11:00 - 04:00</a>
</div>
<div className="py-2 px-2">
<a className="text-slate-200 font-normal border-[1px] py-[2px] px-[4px] rounded-lg border-slate-400 w-8 text-[8px]">Techno</a>
</div>
</div>
</a>
</div>
<div className="text-red-400"><h1>test</h1></div>
</ul>
</div>
{/* Amsterdam Events */}
<div className="flex justify-center py-8">
<button className="text-[8px] uppercase font-medium rounded-md py-[8px] px-2 bg-white">see events in Amsterdam</button>
</div>
{/* All Events */}
<div className="mx-auto max-w-6xl w-full">
<h1 className="px-8 text-white font-regular tracking-wider text-xl md:text-2xl">Amsterdam</h1>
</div>
<div className="max-auto max-w-6xl">
<div className="grid grid-cols-1 md:grid-cols-3 pt-4 md:w-full w-full px-8 gap-4">
{events.map((event) => (
<EventsCards key={event.id} events={event} />
))}
</div>
</div>
</div>
</div>
)
}
export default Events;```
CodePudding user response：
It happens because you make some changes on the server side and save them before the Fast-Refresh completes hence causing a hydration error. You can manually reload the page after completing saving the changes or wait for Fast-Refresh to complete and then save your codes.
CodePudding user response：
There are a couple of issues with your code that are causing issues:
- Invalid markup (anchor tags inside other anchor tags, ul tags without li children).
- You are passing the prop
eventsto your<EventCard />component (it should have a name that is different from the events array retrieved server-side) - You are using a
event.idfor your key prop when none exists (it should beevent.trcid).
Here's a basic working version of your components:
export default function Events({ events }) {
return (
<>
{events.map((event) => (
<EventsCards key={event.trcid} event={event} />
))}
</>
);
}
function EventsCards({ event }) {
return <div>{event.title}</div>;
}
export async function getStaticProps() {
try {
const res = await axios.get(
'https://open.data.amsterdam.nl/Festivals.json'
);
const events = res.data;
return {
props: {
events,
},
};
} catch (error) {
console.log(error);
}
}
More often, it's best to start by getting the data on the page and then add in your additional content and styles.