大佬教程收集整理的这篇文章主要介绍了pages.map 不是 gatsby nodejs 中使用 axios 获取数据的函数，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我不知道出了什么问题，这作为使用 useState 的 React 组件非常有效，但我需要创建动态页面。我创建了 gatsby-node.Js 但我不断收到响应，例如 pages.map() is not a function。我尝试控制台日志以查看发送到 createPages 的内容，但没有显示任何内容。可能我在使用 console.log 做正确的事情。尽管如此，我需要帮助将页面传递给 createPages 并能够在 console.log 中查看数据，就像我在反应组件中可以轻松看到的那样。 @L_404_0@
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。
您需要做的就是使用 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
},})
})
}
如您所见，避免承诺@R_616_11222@、更干净、更直接。
,放在 Node 文件中的 console.logs 会在终端中提示，而不是在浏览器的控制台中（它没有访问服务器的权限）。
在您的情况下，pages 未在 createPages 的范围内定义，因此它变成了 undefined，从而破坏了您的代码。尝试将逻辑包装在里面：
const path = require("path")
const axios = require('axios')
const url = 'xxxxxxxxxxxxxxxxx';
exports.createPages = ({ actions }) => {
const { createPage } = actions
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
});
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,context: {
},})
})
}
pages 它似乎是一个对象（因为您正在返回它）并且您可以使用 @H_932_7@map 循环遍历一个对象。
创建一个空数组并在循环之前推送每个页面。
另一个试验将使用 async/await 方法：
const path = require("path")
const axios = require('axios')
const url = 'xxxxxxxxxxxxxxxxx';
exports.createPages = async ({ actions }) => {
const { createPage } = actions
const pages = await axios.get(url).then(({data}) => {
const pages = data["hydra:member"].map((pagE)=> {
return {
id: page.idMgpage,})
})
}
以上是大佬教程为你收集整理的pages.map 不是 gatsby nodejs 中使用 axios 获取数据的函数全部内容，希望文章能够帮你解决pages.map 不是 gatsby nodejs 中使用 axios 获取数据的函数所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。