Masalah utamanya adalah ketika Anda mencoba mengurai konten JSON,
JSON.parse(post.paragraph)
isinya tidak terdefinisi. Itu sebabnya Anda mendapatkan kesalahan. Anda tidak boleh merender konten sampai data dimuat. Dalam masalah khusus saya adalah sebagai berikut:
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>
);
}
Dalam bagian kode ini, saya memanggil kueri asinkron melalui klien apollo. Namun, pada panggilan rendering, saya mendapatkan kesalahan yang sama seperti Anda. Kemudian, saya telah menambahkan kode berikut, untuk menunggu hingga data dimuat. Setelah data dimuat, pengait dipicu dan merender ulang komponen.
if (loading) return (<>{"loading..."}</>);