从当前组件成功进行api调用后，向另一个react组件显示警报

import React, { useState, useEffect } from "react";
import AlertComponent from "./AlertComponent";
import { fetchData } from "./api"; // 假设有一个名为fetchData的API调用函数

const MyComponent = () => {
  const [showAlert, setShowAlert] = useState(false);
  const [apiData, setApiData] = useState(null);

  useEffect(() => {
    const fetchDataAndShowAlert = async () => {
      try {
        const response = await fetchData(); // 调用API获取数据
        setApiData(response.data); // 存储API返回的数据

        // 根据API调用成功与否来控制显示警报
        if (response.status === 200) {
          setShowAlert(true);
        }
      } catch (error) {
        console.error("API调用失败", error);
      }
    };

    fetchDataAndShowAlert();
  }, []);

  return (
    <div>
      {showAlert && (
        <AlertComponent
          type="success"
          message="API调用成功"
          data={apiData}
        />
      )}
      {/* 其他组件内容 */}
    </div>
  );
};

export default MyComponent;