如何用FlatList处理Axios返回的嵌套对象型汇率数据

1. 转换嵌套数据为FlatList可用格式 #

API返回的rates是嵌套对象，FlatList需要数组类型的数据源，我们可以用Object.entries()把对象转换为数组：

// 假设API返回数据存储在response.data中
const apiResponse = response.data;
// 将rates对象转为[{ currency: 货币代码, rate: 汇率值 }, ...]格式的数组
const ratesArray = Object.entries(apiResponse.rates).map(([currency, rate]) => ({
  currency,
  rate: parseFloat(rate) // 可选：将字符串格式的汇率转为数字，便于后续处理
}));

2. 使用FlatList渲染数据 #

基于转换后的数组，实现FlatList组件渲染每一项货币与汇率：

import { FlatList, Text, View, StyleSheet } from 'react-native';

// ...

<FlatList
  data={ratesArray}
  keyExtractor={(item) => item.currency} // 用货币代码作为唯一key
  renderItem={({ item }) => (
    <View style={styles.listItem}>
      <Text style={styles.currencyCode}>{item.currency}</Text>
      <Text style={styles.rateText}>1 USD = {item.rate.toFixed(4)} {item.currency}</Text>
    </View>
  )}
/>

// 样式示例
const styles = StyleSheet.create({
  listItem: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  currencyCode: {
    fontSize: 16,
    fontWeight: 'bold'
  },
  rateText: {
    fontSize: 14,
    color: '#666'
  }
});

3. 完整请求与渲染示例 #

整合Axios请求、数据转换与FlatList渲染的完整组件：

import React, { useState, useEffect } from 'react';
import { FlatList, Text, View, StyleSheet, ActivityIndicator } from 'react-native';
import axios from 'axios';

const ExchangeRateScreen = () => {
  const [ratesArray, setRatesArray] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchExchangeRates = async () => {
      try {
        const response = await axios.get('https://api.currencyfreaks.com/latest', {
          params: {
            apikey: '你的API密钥', // 替换为你的CurrencyFreaks密钥
            base: 'USD'
          }
        });
        // 转换数据格式
        const convertedData = Object.entries(response.data.rates).map(([currency, rate]) => ({
          currency,
          rate: parseFloat(rate)
        }));
        setRatesArray(convertedData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchExchangeRates();
  }, []);

  // 加载状态
  if (loading) {
    return <ActivityIndicator size="large" color="#007AFF" style={{ flex: 1, justifyContent: 'center' }} />;
  }

  // 错误状态
  if (error) {
    return <Text style={styles.errorText}>请求失败：{error}</Text>;
  }

  // 渲染列表
  return (
    <FlatList
      data={ratesArray}
      keyExtractor={(item) => item.currency}
      renderItem={({ item }) => (
        <View style={styles.listItem}>
          <Text style={styles.currencyCode}>{item.currency}</Text>
          <Text style={styles.rateText}>{item.rate.toFixed(4)}</Text>
        </View>
      )}
    />
  );
};

const styles = StyleSheet.create({
  listItem: {
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  currencyCode: {
    fontSize: 16,
    fontWeight: '500'
  },
  rateText: {
    fontSize: 16,
    color: '#666'
  },
  errorText: {
    fontSize: 16,
    color: '#FF3B30',
    textAlign: 'center',
    marginTop: 20
  }
});

export default ExchangeRateScreen;

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