如何制作 Gatsby Storyblok 博客索引页

Question

我正在尝试呈现一个博客页面以显示所有 Storyblok 博客条目：

这是我的 blog.js 页面

import React from "react"

import Layout from "../components/layout"

import Blogposts from "../components/BlogPosts"

import StoryblokService from '../utils/storyblok-service'

export default class extends React.Component {

  state = {

    stories: {

    }

  }

  async getInitialStories() {

    let { data: { stories } } = await StoryblokService.get('cdn/stories?starts_with=blog')

    return stories

  }

  async componentDidMount() {

    let stories = await this.getInitialStories()

    if(stories.content) this.setState({ stories })

    console.log(stories)

    setTimeout(() => StoryblokService.initEditor(this), 200)

  }

  render() {

    return (

      <Layout>

        <Blogposts stories={this.state.stories.content} />

      </Layout>

    )

  }

}

console.log(stories)

返回我的博客文章

Blogposts 组件看起来像这样

import React from 'react'

const BlogPosts = (stories) => (

    <ul>

      {stories.map((story) => (

          <li key={story._uid}>

            { story.title }

          </li>

        )

      )}

    </ul>

)

export default BlogPosts 

但是当我运行它时，我得到了这个错误。

TypeError: undefined is not a function (near '...stories.map...') BlogPosts src/components/BlogPosts.js:5

2 | 

  3 | const BlogPosts = (stories) => (

  4 |

> 5 |     <ul>

  6 |       {stories.map((story) => (

  7 |           <li key={story._uid}>

  8 |             { story.title }

任何帮助将不胜感激！谢谢。

Answer 1

您正在传递undefined给Blogposts，因为content一开始您的状态中不存在，并且您仅在获取数据后才设置它。

Answer 2

您在此处传递故事<Blogposts stories={this.state.stories.content} />，但值是通过异步获取的。所以模板试图在值可用之前呈现const BlogPosts = (stories) => ()改为<Blogposts stories={this.state.stories.content} />_{this.state.stories.content && <Blogposts stories={this.state.stories.content} />}