在 React Native 中重构 JSON 格式

Question

我从汇率 API 获得了 JSON 数据，但是当我尝试在 flatlist 中显示它时出现错误：Invariant violation tried to get frame for out of range index nan 然后我意识到这不是我想要的 JSON 格式。数据是：

{  
"rates":{  
  "CAD":0.1669423548,
  "HKD":1.0,
  "PLN":0.4835606816
},
"base":"EUR",
"date":"2019-07-11"
}

我想要的样子

{  
"rates":[  
  {  
     "currency":"hkd",
     "rate":"1",
     "base":"EUR",
     "date":"2019-07-11"
  },
     {  
     "currency":"CAD",
     "rate":"0.1669423548",
     "base":"EUR",
     "date":"2019-07-11"
  },
   {  
     "currency":"PLN",
     "rate":"0.4835606816",
     "base":"EUR",
     "date":"2019-07-11"
  },
]
}

这就是我获取数据的方式

async _getRateData() {

const response = await fetch('https://api.exchangeratesapi.io/latest?base=EUR');
const json = await response.json();

this.setState({
  loading: false,
  dataSource: json.base,
  rates: json.rates,
  date: json.date,
  base: json.base,
})
 }

我是原生反应新手，我不知道该怎么做

Answer 1

您可以将您的 _getRateData() 方法更新为：

async _getRateData() {

  const response = await fetch('https://api.exchangeratesapi.io/latest?base=EUR');
  const json = await response.json();

  // setting up data object from API endpoint to work with
  const data = {
    rates: json.rates,
    date: json.date,
    base: json.base,
  }

  // data transformation
  const newData = {
    // Object.keys method return array of all keys in rates obejct
    rates: Object.keys(data.rates).map((currency, idx) => {
      // then with map function you can map all keys
      // and construct your own data structure
      return {
        currency, // first element currency (the same as currency: currency, es6 shortcode)
        rate: data.rates[currency], // accessing rates element by key
        base: data.base, // adding rest of the data
        date: data.date
      };
    })
  };

  // setting data to state
  this.setState({
    loading: false,
    dataSource: json.base,
    rates: newData.rates // set to rates only array
  })

}

简单数据演示：https://codesandbox.io/s/vibrant-carson-d5idp