Vấn đề chính là khi bạn cố gắng phân tích cú pháp nội dung JSON,
JSON.parse(post.paragraph)
nội dung là không xác định. Đó là lý do tại sao bạn đang gặp lỗi. Bạn không nên hiển thị nội dung cho đến khi tải xong dữ liệu. Trong vấn đề cụ thể của tôi là như sau:
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>
);
}
Trong đoạn mã này, tôi đang gọi một truy vấn không đồng bộ thông qua ứng dụng khách apollo. Tuy nhiên, trong cuộc gọi hiển thị, tôi gặp phải lỗi tương tự như lỗi của bạn. Sau đó, tôi đã thêm mã sau, để đợi cho đến khi dữ liệu được tải. Sau khi dữ liệu được tải, hook được kích hoạt và hiển thị lại thành phần.
if (loading) return (<>{"loading..."}</>);