React is een populaire JavaScript bibliotheek voor het bouwen van gebruikersinterfaces, die wereldwijd veel wordt gebruikt door developers. Het vereenvoudigt het proces van het bouwen van complexe UI’s door herbruikbare componenten en statebeheer te bieden.
Of je React nu gebruikt als beginner of als ervaren developer, het is niet ongewoon om foutmeldingen als “Objects Are Not Valid as a React Child” te zien
In dit artikel onderzoeken we de oorzaken van deze foutmelding en geven we oplossingen die je kunt gebruiken om de foutmelding op te lossen.
Wat veroorzaakt de “Objects Are Not Valid as a React Child” foutmelding?
De “Objects Are Not Valid as a React Child” fout is een veel voorkomende fout wanneer je met React programmeert. Deze treedt op wanneer een component een object als child ontvangt in plaats van een geldig React element. De foutmelding ziet er meestal zo uit:
De foutmelding houdt in dat het component een object heeft ontvangen in plaats van een geldig React child element (zoals strings, getallen of React elementen, maar geen arrays of objecten). De primaire oorzaak van deze fout is het doorgeven van een ongeldig gegevenstype en niet-serialiseerbare gegevens als child.
1. Er wordt een object als child doorgegeven
export default function App() {
return (
<div>
{{ message: "Hello world!" }}
</div>
);
}In dit voorbeeld probeert de App component een object als child element weer te geven. Dit veroorzaakt de foutmelding “Objects Are Not Valid as a React Child”, omdat React objecten niet herkent als geldige child-elementen.
2. Er worden niet-serialiseerbare gegevens doorgeven als child
export default function App() {
const message = { text: "Hello world!" };
return (
<div>
{message}
</div>
);
}In deze bovenstaande code probeert de App component een niet-serialiseerbaar gegevenstype (een object) als child element weer te geven. Dit veroorzaakt de foutmelding “Objects Are Not Valid as a React Child”, omdat React vereist dat alle kindelementen serialiseerbaar zijn.
3. Er wordt een array doorgeven als child
export default function App() {
const students = [
{ name: 'John Doe', age: 12 },
{ name: 'Jane Doe', age: 14 },
];
const locale = {
state: 'Florida',
country: 'USA',
};
return (
<>
<span>{students}</span>
<div>{locale}</div>
</>
);
}In deze code hebben we een array students en een object locale die we proberen te renderen als child. Het doorgeven van een array of object als child is echter niet geldig in React – deze code geeft de foutmelding “Objects Are Not Valid as a React Child”.
De fout “Objects Are Not Valid as a React Child” oplossen
Om deze fout op te lossen is het belangrijk om te onthouden dat arrays en objecten iterabel zijn in JavaScript. JavaScript beschouwt arrays als een speciaal type object, daarom zal de foutmelding nog steeds “Objects Are Not Valid as a React Child” luiden, zelfs als het probleem een array betreft.
Om toegang te krijgen tot de gegevens in een array of object, kun je itereren door de array met behulp van een loop, toegang krijgen tot specifieke elementen met behulp van hun indexnummer of puntnotatie gebruiken voor objecten.
Hier zijn enkele van de meest voorkomende oplossingen:
1. Converteer objecten naar strings of getallen
Een manier om de fout op te lossen is door het object te converteren naar een string of getal voordat je het doorgeeft als child. Bijvoorbeeld:
export default function App() {
const message = { text: "Hello world!" };
return (
<div>
{JSON.stringify(message)}
</div>
);
}In dit voorbeeld converteren we het message object naar een string met behulp van de JSON.stringify() methode voordat we het doorgeven als child element. Dit voorkomt de fout “Objects Are Not Valid as a React Child”.
2. Render arrays op de juiste manier met de map() methode
Een andere veel voorkomende oorzaak van de fout is onjuist gebruik van arrays in React. Als je een array rechtstreeks als child element probeert te renderen, treedt de fout “Objects Are Not Valid as a React Child” op.
In plaats daarvan moet je de methode map() gebruiken om elk item in de array te converteren naar een geldig React child element.
export default function App() {
const students = [
{ name: 'John Doe', age: 12 },
{ name: 'Jane Doe', age: 14 },
];
const locale = {
state: 'Florida',
country: 'USA',
};
return (
<>
{students.map((student, index) => (
<div key={index}>
<span>{student.name}</span>
<span>{student.age}</span>
</div>
))}
<div>
{locale.state}, {locale.country}
</div>
</>
);
}In deze code gebruiken we de methode map() om de array students te doorlopen en elk element te converteren naar een div met de naam en leeftijd van de student. We voegen ook een key prop toe aan elk child element om de renderprestaties te optimaliseren.
3. Gebruik conditional renderen om het renderen van ongeldige gegevenstypen te voorkomen
Als je gegevens doorgeeft die mogelijk niet geldig zijn als React child, kun je conditional/voorwaardelijke rendering gebruiken om te voorkomen dat de fout optreedt.
function App() {
const message = { text: "Hello world!" };
return (
<div>
{typeof message === 'string' ? message : null}
</div>
);
}In dit voorbeeld gebruiken we voorwaardelijk renderen om het bericht alleen te renderen als het een string is. Dit voorkomt dat de fout “Objects Are Not Valid as a React Child” optreedt.
Best practices om de fout “Objects are not valid as a React Child” te voorkomen
Om te voorkomen dat de fout “Objects Are Not Valid as a React Child” zich voordoet, is het belangrijk om best practices te volgen bij het bouwen van React componenten. Enkele van de belangrijkste best practices zijn
- Geef altijd geldige React child elementen door als childs
- Vermijd het doorgeven van niet-gerialiseerbare gegevens als childs
- Gebruik voorwaardelijke rendering om edge cases en ongeldige gegevenstypen af te handelen
Samenvatting
In dit artikel hebben we geleerd hoe we de fout “Objects Are Not Valid as a React Child” in alle mogelijke scenario’s kunnen oplossen en wat de beste werkwijzen zijn om deze fout te voorkomen.
Het is belangrijk om te onthouden dat Arrays worden beschouwd als een speciaal type Object, dus als je er niet in slaagt om door een array te loopen voordat je deze rendert in je React applicatie, zal de fout “Objects Are Not Valid as a React Child” optreden.
Als je een React applicatie hebt die je met de wereld wilt delen, kijk dan eens naar de Applicatie Hosting service van Kinsta. Je kunt gratis aan de slag.
Deel je ervaring! Ben je dit probleem eerder tegengekomen? Zo ja, hoe heb je het opgelost? Heb je een andere aanpak gebruikt die niet in dit artikel is behandeld? Laat het ons weten in de comments.
