Het grootste probleem is wanneer u de JSON-inhoud probeert te ontleden,
JSON.parse(post.paragraph)
de inhoud is niet gedefinieerd. Daarom krijg je de foutmelding. U moet de inhoud pas weergeven als de gegevens zijn geladen. In mijn specifieke probleem was het volgende:
const BlogPostPage: React.FC<MatchProps> = (props: MatchProps) => {
const classes = useStyles();
const { data, loading, error } = useGetBlogQuery({
variables: {
id: props.match.params.id
}
});
return (
<BlogPostContent markdown={data?.blog?.contentJson}></BlogPostContent>
);
}
In dit stukje code roep ik een asynchrone query op via de Apollo-client. Bij de rendering-aanroep kreeg ik echter dezelfde fout als de uwe. Vervolgens heb ik de volgende code toegevoegd om te wachten tot de gegevens zijn geladen. Nadat de gegevens zijn geladen, wordt de hook geactiveerd en wordt de component opnieuw weergegeven.
if (loading) return (<>{"loading..."}</>);