वर्तमान में मेरे पास एक आईडी और शीर्षक डेटा फ़ील्ड के साथ मेरे स्ट्रैपी सीएमएस में एक ब्लॉग संग्रह प्रकार है। मैं प्रत्येक ब्लॉग पेज के लिए ब्लॉग सामग्री को गतिशील रूप से लोड करने के लिए अपने फ्रंटएंड के लिए नेक्स्टजे का उपयोग कर रहा हूं। लेकिन जब मेरा डायनामिक पेज लोड होता है तो मेरी सामग्री लोड नहीं होती है।

पृष्ठ जहां व्यक्तिगत ब्लॉग संग्रहीत हैं:

{posts &&
        posts.map((item, idx) => (
          <Link href={`/BlogPage/${item.id}`}>
            <div>
              <img src={`http://localhost:1337${item.Thumbnail.url}`}/>
            </div>
          </Link>

फिर मेरी ब्लॉगपेज निर्देशिका के अंदर मेरे पास एक फ़ाइल [आईडी] है। जेएस:

export default function name({blog}) {
    return (
      <>     
      <div>
        {blog.Title}
      </div>
</>
)}
// Tell nextjs how many pages are there
export async function getStaticPaths() {
  const res = await fetch("http://localhost:1337/blogs");
  const posts = await res.json();

  const paths = posts.map((blog) => ({
    params: { id: blog.id.toString() },
  }));

  return {
    paths,
    fallback: false,
  };
}

// Get data for each individual page
export async function getStaticProps({ params }) {
  const { id } = params;

  const res = await fetch(`http://localhost:1337/blogs?id=${id}`);
  const data = await res.json();
  const posts = data[0];

  return {
    props: { posts },
  };
}

यह मुझे इस URL http://localhost:3000/BlogPage/1 पर ले जाता है और मुझे एक त्रुटि देता है

लेखन त्रुटि: अपरिभाषित की संपत्ति 'शीर्षक' नहीं पढ़ सकता

0
JJM50 28 अगस्त 2021, 14:24

1 उत्तर

सबसे बढ़िया उत्तर

नाम फ़ंक्शन के getStaticProps और getStaticPaths को बाहर निकालने का प्रयास करें


export async function getStaticPaths() {
  const res = await fetch("http://localhost:1337/blogs");
  const posts = await res.json();

  const paths = posts.map((blog) => ({
    params: { id: blog.id.toString() },
  }));

  return {
    paths,
    fallback: false,
  };
}


export async function getStaticProps({ params }) {
  const { id } = params;

  const res = await fetch(`http://localhost:1337/blogs?id=${id}`);
  const data = await res.json();
  const posts = data[0];

  return {
    props: { posts },
  };
}

export default function name({posts }) { // change this line
    return (
      <>     
      <div>
        {posts.Title} // change this line // Are you sure is it Title? not title? if it is with lowercase, it will return null
      </div>
     </>
    )
}

0
Mohamed Gamal Eldin 28 अगस्त 2021, 15:55
ओह हाँ पोस्ट काम किया। धन्यवाद। लेकिन फिर भी मैं .map (ब्लॉग) का उपयोग कर रहा था तो यह पोस्ट.शीर्षक क्यों ले रहा है?
 – 
JJM50
28 अगस्त 2021, 16:01
क्षमा करें, मुझे समझ में नहीं आता कि आपका वास्तव में क्या मतलब है, अगर आप (ब्लॉग) से (पोस्ट) में परिवर्तन के बारे में बात कर रहे हैं, तो बस getStaticProps के रूप में आप पृष्ठ घटक को प्रोप के रूप में पास कर रहे हैं। nextjs.org/docs/basic-features/data-fetching#example
 – 
Mohamed Gamal Eldin
28 अगस्त 2021, 16:12