React中将exchangerate.host返回的rates扁平JSON对象转为数组的方法

问题原因 #

1. 接口返回的rates是对象类型，本身不具备数组的map方法，因此直接调用会报错，必须先转成数组格式再遍历。
2. 你现有代码的错误点：构造results时给key字段套了多余的数组层{"key":[el[0]], ...}，会导致渲染时键名显示为数组格式（例如["USD"]）。

修复方案 #

方案1：直接修改原有代码即可运行

仅需要去掉key字段外层的多余中括号：

render(){
    var {isLoaded, items} = this.state;

    if(!isLoaded){
      return <div>Loading...</div>
    }else{
      // 去掉key字段外层的[]即可
      const results = Object.entries(items.rates).map(el => ({"key": el[0], "value": el[1]}))
    
      return(
        <div className="App">
          <header className="App-header">
              <ul>
                {results.map(item => <li key={item.key}> {item.key} : {item.value} </li>)}
              </ul>
          </header>
        </div>
      );
    }
}

方案2：转换为你要求的单键对象数组格式

如果你需要严格按照要求把rates转成[{"start": 1},...,{"end":20}]的结构，转换和渲染代码如下：

// 转换为单键对象数组
const ratesArray = Object.entries(items.rates).map(([key, value]) => ({[key]: value}))

// 渲染遍历代码
<ul>
  {ratesArray.map(item => {
    const [currency, rate] = Object.entries(item)[0]
    return <li key={currency}>{currency} : {rate}</li>
  })}
</ul>

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