Huvudproblemet är när du försöker analysera JSON-innehållet,
JSON.parse(post.paragraph)
innehållet är odefinierat. Det är därför du får felet. Du bör inte rendera innehållet förrän data har laddats. I mitt specifika problem var följande:
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>
);
}
I den här kodbiten anropar jag en asynkfråga via apollo-klienten. Men vid renderingsanropet fick jag samma felmeddelande som ditt. Sedan har jag lagt till följande kod för att vänta tills data laddas. Efter att data har laddats utlöses kroken och komponenten återrenderas.
if (loading) return (<>{"loading..."}</>);