时间戳

首页 > 解决方案 > pages.map 不是 gatsby nodejs 中使用 axios 获取数据的函数

reactjs - pages.map 不是 gatsby nodejs 中使用 axios 获取数据的函数

问题描述

我不知道出了什么问题，这可以完美地用作使用 useState 的反应组件，但我需要创建动态页面。我创建了 gatsby-node.js 但我不断收到响应，例如 pages.map() 不是函数。我尝试控制台日志查看发送到createPages的内容，但没有显示任何内容。可能我正在使用 console.log 做正确的事情。尽管如此，我需要帮助将页面传递给 createPages 并能够通过 console.log 查看数据，因为我可以在 react 组件中轻松看到。在此处输入图像描述

    const path = require("path")
    const axios = require('axios')
    const url = 'xxxxxxxxxxxxxxxxx';
    
        const pages  = axios.get(url).then(({data}) => {
           const pages = data["hydra:member"].map((page)=> {
               return {
                   id: page.idMgpage,
                   name:page.name,
                   city: page, 
                   parentId: page.parentId
               }
           });
           pages.map((page) => {
               page.sections =[];
               page.components =[];
               page.items = [];
                axios.get(`xxxxxxxxxxxxxxxxxxxxx?page=${page.id}`).then((section)=>{
                const sections = section.data["hydra:member"].map((section) => {
                   page.sections.push(section);
                    return {
                        content: section.content
                    }      
                });
                return sections
                });
                axios.get(`http://xxxxxxxxxxxxxxxx?page=${page.id}`).then((component)=> {
                const components = component.data["hydra:member"].map((component) => {
                   page.components.push(component);
                   return {
                       heading: component.heading,
                       subheading: component.subheading,
                       content: component.content
                   }
                });
                return components
                });
                axios.get(`http://xxxxxxxxxx?page=${page.id}`).then((item)=> {
                const items = item.data["hydra:member"].map((item) => {
                    page.items.push(item);
                   return {
                       itemType: item.itemType,
                       itemUrl: item.itemUrl,
                       itemContent: item.itemContent,
                       itemHeading: item.itemHeading
                   }
                });
                return items
                });
           });
           return pages
           
       });
     
     //
    
    exports.createPages = ({ actions }) => {
      const { createPage } = actions
    
      const pageTemplate = path.resolve(`src/templates/page.js`)
    
      pages.map(page => {
        const isHomePage = page.parentId === null
    
        const path = isHomePage
          ? `/${page.city.city}`
          : `/${page.city.city}/${page.id}`
    
        createPage({
          path: path,
          component: pageTemplate,
          context: {
            
          },
        })
      })
    }

从我的组件中，我能够在 useState 上使用 .map() 并查看数据。现在在 gatsby 中，我有 Gatsby Nodejs、名为 page.js 和 index.js 的模板组件，它们没有比 hello 更多的代码。

标签： reactjsgatsby

解决方案

您需要做的就是使用 Async Await，这将是一种直接且不拥挤的方法。

const path = require("path")
const axios = require('axios')
exports.createPages = async ({ actions }) =>  {
  const { createPage } = actions

  const pageTemplate = path.resolve(`src/templates/page.js`)

    const sections = [];
    const res = await axios.get(`xxxxxxxxxxxxxxxxxxxxxxx`);  
    const pages = await res.data['hydra:member'].map((result) => {
          return {
             id: result.idMgpage,
             city: result.city,
             category: result.category
            }     
    })
    pages.map( async(page) => {
          page.sections = [];
          page.components = [];
          page.items = [];
          const secData =  await axios.get(`xxxxxxxxxxxxxxxxx?page=${page.id}`)
          await secData.data['hydra:member'].map((result) => {
            return page.sections.push(result) 
          });
          const comData =  await axios.get(`xxxxxxxxxxxxxxxxxxxxxxxx?page=${page.id}`)
          await comData.data['hydra:member'].map((result) => {
            return page.components.push(result) 
          });
          const itemsData =  await axios.get(`xxxxxxxxxxxxxxxxxxxxxxx?page=${page.id}`)
          await itemsData.data['hydra:member'].map((result) => {
            console.log(result)
            return page.items.push(result) 
          });
       sections.push( [page.id , page.category, page.city, page.sections, page.components, page.items])
      })
    
  pages.map(page => {
      console.log(page)
    const isHomePage = page.parentId === null

    const path = isHomePage
      ? `/${page.city}`
      : `/${page.city}/${page.id}`

    createPage({
      path: path,
      component: pageTemplate,
      context: {
        // meta: page.meta,
        pageId: page.id,
        category: page.category,
        sections: page.sections,
        components: page.components,
        items: page.items
      },
    })
  })
}

正如你所看到的，避免承诺更容易、干净和直接。

推荐阅读