Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
Article originally published here :
This is a React disaster, because I can spend countless hour on this (well-known!), but simple bug :
"Each child in a list should have a unique 'key' prop."
Wait, wait, wait... I already googled around and it seems so easy to fix!
I had already set a unique key on every element in my list!
Who's in charge? Who's guilty?
Undefined data when initializing my component.
Yup.
Here's what was happening:
The solution was simple but so easy to miss
Check my data before passing it to my component!
This simple conditional rendering fixed everything.
Always make sure your data exists before using it!
// This is wrong, causing an error
<PlotMap data={data}>
// Fixed!
{data && <PlotMap data={data}>}
This is a React disaster, because I can spend countless hour on this (well-known!), but simple bug :
"Each child in a list should have a unique 'key' prop."
Wait, wait, wait... I already googled around and it seems so easy to fix!
I had already set a unique key on every element in my list!
Who's in charge? Who's guilty?
Undefined data when initializing my component.
Yup.
Here's what was happening:
- My server component was loading data
- Before loading, my state was undefined
- My PlotMap was trying to map over undefined
- React threw the key error
The solution was simple but so easy to miss
Check my data before passing it to my component!
This simple conditional rendering fixed everything.
Always make sure your data exists before using it!
// This is wrong, causing an error
<PlotMap data={data}>
// Fixed!
{data && <PlotMap data={data}>}