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

但是當我運行它時，我收到了這個錯誤。

類型錯誤：未定義不是函數（靠近“...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} />}