मुख्य समस्या तब होती है जब आप JSON सामग्री को पार्स करने का प्रयास करते हैं,
JSON.parse(post.paragraph)
सामग्री अपरिभाषित है। इसलिए आपको त्रुटि मिल रही है। डेटा लोड होने तक आपको सामग्री प्रस्तुत नहीं करनी चाहिए। मेरी विशेष समस्या में निम्नलिखित थी:
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>
);
}
कोड के इस टुकड़े में, मैं अपोलो क्लाइंट के माध्यम से एक एसिंक क्वेरी को कॉल कर रहा हूं। हालाँकि, रेंडरिंग कॉल पर, मुझे आपकी जैसी ही त्रुटि मिल रही थी। फिर, मैंने डेटा लोड होने तक प्रतीक्षा करने के लिए निम्न कोड जोड़ा है। डेटा लोड होने के बाद, हुक चालू हो जाता है और घटक को फिर से प्रस्तुत करता है।
if (loading) return (<>{"loading..."}</>);
