如何在一个类中调用两个api以使两个api都工作？(React)

import React, { Component } from 'react';
import axios from 'axios';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data1: null,
      data2: null
    };
  }
}

componentDidMount() {
  axios.get('API1_URL')
    .then(response => {
      this.setState({ data1: response.data });
    })
    .catch(error => {
      console.error('Error fetching data from API1:', error);
    });

  axios.get('API2_URL')
    .then(response => {
      this.setState({ data2: response.data });
    })
    .catch(error => {
      console.error('Error fetching data from API2:', error);
    });
}

render() {
  const { data1, data2 } = this.state;

  return (
    <div>
      {data1 && <p>Data from API 1: {data1}</p>}
      {data2 && <p>Data from API 2: {data2}</p>}
    </div>
  );
}