React:当使用axios将api数据传递给子组件时，如何修复未定义的问题？

import axios from 'axios';

componentDidMount() {
  axios.get('https://api.example.com/data')
    .then(response => {
      const apiData = response.data;
      // 处理数据，例如保存到组件的state中
      this.setState({ apiData });
    })
    .catch(error => {
      // 处理错误
      console.error('API请求错误:', error);
    });
}

render() {
  const { apiData } = this.state;

  return (
    <div>
      <ChildComponent data={apiData} />
    </div>
  );
}

const ChildComponent = ({ data }) => {
  // 检查数据是否存在
  if (!data) {
    return <div>Loading...</div>; // 或者显示加载状态
  }

  // 使用数据进行渲染或其他操作
  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};