如何制作 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:52 |   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} />}