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

returns 我的博文

博文组件如下所示

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

您正在此处传递故事 <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} />}

Answer 2

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

如何制作 Gatsby Storyblok 博客索引页

How to make a Gatsby Storyblok blog index page

javascript

reactjs

gatsby

storyblok