0

我正在尝试从 Storyblok API 获取数据，但在 getStaticProps 中我从故事书中获取数据，但它无法将数据返回到页面。

pages/docs/[slug].js

import React from 'react'
import Storyblok from "../../lib/storyblok"
 
export default function DocsArticle( props ) {  
  console.log("PROPS: ", props)
  return (
    <>
        <div className="page">
          {props.story.name}
        </div>
    </>
  );
}
 
export async function getStaticProps({ params, preview = false }) {
 
  let slug = params.slug ? params.slug : "home";
  let sbParams = {
    version: "draft", // or 'published' / ' draft
  };
 
  if (preview) {
    sbParams.version = "draft";
    sbParams.cv = Date.now();
  }

  // load the stories insides the pages folder
  let { data } = await Storyblok.get(`cdn/stories/${slug}`, sbParams);
  console.log("STORY DATA:", data);
  return {
    props: {
      story: data ? data.story : null,
      preview,
    },
    revalidate: 10, // revalidate every hour
  };
}
 
export async function getStaticPaths() {
  
  let { data } = await Storyblok.get('cdn/links/', {
      starts_with: 'article'
  })
  let paths = [];
  Object.keys(data.links).forEach((linkKey) => {
    // don't create routes for folders and the index page
    if (data.links[linkKey].is_folder || data.links[linkKey].slug === "home") {
      return;
    }
 
    // get array for slug because of catch all
    
    const slug = data.links[linkKey].slug;
        
    // remove the pages part from the slug
    let newSlug = slug.replace('docs', '')
    let splittedSlug = newSlug.split("/");

    paths.push({ params: { slug: splittedSlug.toString() } });
  });
  
  return {
    paths: paths,
    fallback: false,
  };
}

页面/_app.js

...

export default withRedux(initStore)(
  class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
  return {
    pageProps: Component.getInitialProps
      ? await Component.getInitialProps(ctx)
      : {},
  }
}

render() {
  const { Component, pageProps, store } = this.props
  return (
    <>
      <DefaultSeo
        title="My page"
        description="My test page"
        openGraph={{
          type: 'website',
          locale: 'en_IE',
        }}
      />
      <Head>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
      </Head>
      <Provider store={store}>
        <ThemeProvider theme={theme}>
          <GetCurrentUser />
          <Component {...pageProps} />
        </ThemeProvider>
      </Provider>
    </>
  );
}

})

如果我使用 console.log() 显示数据，我会得到数据，但它不会返回它。

STORY DATA: {
  story: {
    name: 'article1',
    created_at: '2021-08-13T00:36:04.648Z',
    published_at: '2021-08-15T16:24:54.810Z',
    id: 66059334,
    uuid: '900a311a-2ad4-461c-9304-e2f36fd25b07',
    content: {
      _uid: 'd21214b5-1e80-4c6a-aa74-259f082a8242',
      content: [Array],
      component: 'page',
      _editable: '<!--#storyblok#{"name": "page", "space": "122749", "uid": "d21214b5-1e80-4c6a-aa74-259f082a8242", "id": "66059334"}-->'
    },
    slug: 'article1',
    full_slug: 'article1',
    sort_by_date: null,
    position: 10,
    tag_list: [],
    is_startpage: false,
    parent_id: 0,
    meta_data: null,
    group_id: 'bdf123cc-0044-4d02-b4b3-28034ee457d0',
    first_published_at: '2021-08-14T00:02:05.000Z',
    release_id: null,
    lang: 'default',
    path: 'docs',
    alternates: [],
    default_full_slug: null,
    translated_slugs: null
  },
  cv: 1629044699,
  rels: [],
  links: []
}
PROPS:  {}
TypeError: Cannot read property 'title' of undefined

如果你能让我知道我做错了什么，我将不胜感激。

4

0 回答 0