I'm trying to render a blog page to show all the Storyblok blog entries:
Here's my blog.js page
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 component looks like this
import React from 'react'
const BlogPosts = (stories) => (
<ul>
{stories.map((story) => (
<li key={story._uid}>
{ story.title }
</li>
)
)}
</ul>
)
export default BlogPosts
But when I run it I get this error.
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 }
Any help would be hugely appreciated! Thanks.
您将undefined
传递给Blogposts
因为content
在开始时不存在于您的状态中,并且您仅在获取数据后才设置它。
You are passing stories here <Blogposts stories={this.state.stories.content} />
but the value is fetched via async. So the template is trying to render before the value is available in const BlogPosts = (stories) => ()
Change <Blogposts stories={this.state.stories.content} />
to {this.state.stories.content && <Blogposts stories={this.state.stories.content} />}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.