如何在React Native中处理单个组件中的多个API调用？

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

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      data: null,
      error: null,
    };
  }

  componentDidMount() {
    axios.get('https://api.example.com/data1')
      .then(response => {
        this.setState({ data: response.data });
      })
      .catch(error => {
        this.setState({ error: error.message });
      })
      .finally(() => {
        this.setState({ loading: false });
      });

    axios.get('https://api.example.com/data2')
      .then(response => {
        // Handle data2 API response
      })
      .catch(error => {
        // Handle error for data2 API
      });
  }

  render() {
    const { loading, data, error } = this.state;

    if (loading) {
      return (
        <View>
          <ActivityIndicator />
        </View>
      );
    }

    if (error) {
      return (
        <View>
          <Text>Error: {error}</Text>
        </View>
      );
    }

    return (
      <View>
        <Text>Data: {data}</Text>
      </View>
    );
  }
}

export default MyComponent;