反应本机API数据问题：TypeError：未定义不是函数

Question

我在访问返回JSON的API时遇到一些麻烦。我想在屏幕上列出来自API的信息，但出现此错误：TypeError：undefined不是一个函数（在'... this.state.dataSource.map ...附近）。这就是API返回的内容：

{"rates":
{"CAD":1.3229349331,"HKD":7.7674203969,"ISK":127.0881402861,"PHP":50.564836179,"DKK":6.8944162437,
"HUF":308.8509460083,"CZK":22.882325796,"GBP":0.7682325796,"RON":4.4086755884,"SEK":9.7206275958,
"IDR":13652.496538994,"INR":71.3816335948,"BRL":4.3137055838,"RUB":63.4567604984,"HRK":6.8726349792,
"JPY":109.875403784,"THB":31.1748961698,"CHF":0.9820950623,"EUR":0.9229349331,"MYR":4.144993078,
"BGN":1.8050761421,"TRY":6.0491001384,"CNY":6.9815413013,"NOK":9.2637748039,"NZD":1.5564374712,
"ZAR":14.9603137979,"USD":1.0,"MXN":18.5734194739,"SGD":1.3887401938,"AUD":1.4886017536,
"ILS":3.4269497,"KRW":1183.848638671,"PLN":3.9335486848},
"base":"USD",
"date":"2020-02-17"}

代码：

import React, { Component } from 'react';
import { StyleSheet, Text, View, ActivityIndicator } from 'react-native';

export default class ConvertScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: []
    }
  }

  //API
  componentDidMount() {
    return fetch("https://api.exchangeratesapi.io/latest?base=USD")
      .then((response) => response.json())
      .then((responseJson) => {

        this.setState({
          isLoading: false,
          dataSource:responseJson.rates
        })
      })
      .catch((error) => {
        return error
      })
  }
  render() {
    if (!this.state.isLoading) {
      return (
        <View style={style.container}>
          <View>
              {this.state.dataSource.map((item, id) => (
              <Text> {item} </Text>
            ))}
          </View>
        </View >
      );
    }

    else {

      return (
        <View style={style.container}>
          <View style={style.viewInit}>
            <ActivityIndicator />
          </View>
        </View>
      );
    }
  }
}

如何从API迭代“费率”数据？

Answer 1

您收到此错误，因为.map函数仅在数组上可用。

它是{}，但是您期望[]，因此您可能需要使用Object.entries(obj)返回给定对象自己的可枚举字符串键属性[key，value]对的数组。

Object.entries(stats).map(([key, value]) => console.log(key, value))
使用for..in循环也是解决您的问题的方法，它遍历由字符串键入的对象的所有可枚举属性

for (const rate in rates) {
  console.log(`${rate}: ${rates[rate]}`);
}