如何将API返回的JSON数据转换为React Victory组件适用的数组格式

第一段示例使用的数组类型 #

示例中使用的是一维对象数组，每个数组元素都是包含quarter和earnings两个属性的普通JavaScript对象，完全匹配VictoryBar组件要求的传入数据结构。

接口返回数据的处理方法 #

你从接口拿到的是外层嵌套了一层的对象，符合要求的目标数组存储在该对象的historical属性下，直接提取该属性的值即可使用，提供两种常用写法：

写法1：直接传入属性值 #

// apiData为接口返回的完整数据
const apiData = { "historical" : [
  {"quarter": 1, "earnings": 13000},
  {"quarter": 2, "earnings": 16500},
  {"quarter": 3, "earnings": 14250},
  {"quarter": 4, "earnings": 19000}
]};

class App extends React.Component {
  render() {
    return (
      <VictoryBar
        data={apiData.historical}
        x="quarter"
        y="earnings"
      />
    )
  }
}

写法2：提前解构赋值适配原有代码 #

如果你不想修改原有组件的传参逻辑，可以提前把目标数组赋值给data变量，后续代码和官方示例完全一致：

// 从接口返回数据中解构出historical属性并重命名为data
const { historical: data } = apiData;

class App extends React.Component {
  render() {
    return (
      <VictoryBar
        data={data}
        x="quarter"
        y="earnings"
      />
    )
  }
}

内容的提问来源于stack exchange，提问作者garlik6