React JS 中的映射数组

Question

在一个 react / gatsby / wordpress 项目中，我需要从第三方非 graphql 中提取数据 API。我正在尝试解析从此 API 返回的数据并使其可用于 graphql。

我正在关注此 post 中已接受的答案：

我收到的错误是： res.data.full_options.map is not a function

到目前为止，这是我的代码：

exports.sourceNodes = async ({ actions }) => {
    const { createNode } = actions;

    const fetchJoinOptions = () => axios.get(`https://example.com/path/to/api`)

    const res = await fetchJoinOptions()

    console.log(res.data)

    res.data.full_options.map((option, i) => {

    })
}

console.log(res.data) 输出如下：

{
  join_options: { '76': 'Yearly Membership', '366': 'Halloween Sale - 50% Off!' },
  full_options: {
    '76': {
      optionid: '76',
      siteid: '15',
      networkid: '0',
      deleted: '0',
      enabled: '1',
      orderid: '1',
      option_type_id: '0',
      billerid: '0',
      programid: '0',
      legacy: '0',
      details: [Object]
    },
    '97': {
      optionid: '97',
      siteid: '15',
      networkid: '0',
      deleted: '0',
      enabled: '1',
      orderid: '43',
      option_type_id: '0',
      billerid: '0',
      programid: '0',
      legacy: '0',
      details: [Object]
    },
    '190': {
      optionid: '190',
      siteid: '15',
      networkid: '0',
      deleted: '0',
      enabled: '1',
      orderid: '44',
      option_type_id: '0',
      billerid: '0',
      programid: '0',
      legacy: '0',
      details: [Object]
    }
  },
  default_option: '76',
  special_options: { '236': 'Join with Gift Card' }
}

这是完整的错误：

 ERROR #11321  PLUGIN

"gatsby-node.js" threw an error while running the sourceNodes lifecycle:

res.data.full_options.map is not a function

  26 |     console.log(res.data)
  27 |
> 28 |     res.data.full_options.map((option, i) => {
     |                           ^
  29 |
  30 |     })
  31 |

File: gatsby-node.js:28:27

你能解释一下我如何映射这些数据吗？

Answer 1

我认为问题在于您尝试遍历对象，尝试类似的操作：

const output = Object.keys(res.data.full_options).map((key)=>{
something(res.data.full_options[key]) //something you want to do with this value
})

Answer 2

您需要将您的回复转换为 Object.entries 或 Object.values，因为收到的回复格式为 Object 而不是 Array。

Object.entries() and Object.values()

示例：

Object.entries()

const object1 = {
    a: 'somestring',
    b: 42
};

for (const [key, value] of Object.entries(object1)) {
    console.log(`${key}: ${value}`);
}

// expected output:
// "a: somestring"
// "b: 42"

Object.values()

const object1 = {
    a: 'somestring',
    b: 42,
    c: false
};

console.log(Object.values(object1));
// expected output: Array["somestring", 42, false]

Answer 3

问题在这里：

full_options: {

此处 full_options 不是数组，它是一个对象，map() 适用于数组。

要处理此问题，请在 full_options 上尝试 Object.values，它将 return 一个数组，您可以在数组上调用 map() 函数。

React JS 中的映射数组

Mapping array in React JS

reactjs

gatsby