亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何制作 Gatsby Storyblok 博客索引頁

如何制作 Gatsby Storyblok 博客索引頁

守著星空守著你 2023-06-09 15:24:20
我正在嘗試呈現一個博客頁面以顯示所有 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 }任何幫助將不勝感激!謝謝。
查看完整描述

2 回答

?
慕標琳琳

TA貢獻1830條經驗 獲得超9個贊

您正在傳遞undefinedBlogposts,因為content一開始您的狀態中不存在,并且您僅在獲取數據后才設置它。



查看完整回答
反對 回復 2023-06-09
?
鳳凰求蠱

TA貢獻1825條經驗 獲得超4個贊

您在此處傳遞故事<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} />}


查看完整回答
反對 回復 2023-06-09
  • 2 回答
  • 0 關注
  • 157 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號