如何制作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)

返回我的博客文章

​

Blogpost组件如下所示

import React from 'react'
const BlogPosts = (stories) => (
    <ul>
      {stories.map((story) => (
          <li key={story._uid}>
            { story.title }
          </li>
        )
      )}
    </ul>
)
export default BlogPosts 

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

TypeError:未定义不是一个函数(靠近‘...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} />}