如何在React組件中優雅地管理多個API請求的狀態和錯誤處理

在React組件中管理多個API請求的狀態和錯誤處理可以通過使用React Hooks和Context API來實現。以下是一個簡單的示例，演示如何在一個React組件中管理兩個API請求的狀態和錯誤處理：

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [data1, setData1] = useState(null);
  const [loading1, setLoading1] = useState(true);
  const [error1, setError1] = useState(null);

  const [data2, setData2] = useState(null);
  const [loading2, setLoading2] = useState(true);
  const [error2, setError2] = useState(null);

  useEffect(() => {
    const fetchData1 = async () => {
      try {
        const response = await fetch('api_endpoint_1');
        const result = await response.json();
        setData1(result);
      } catch (error) {
        setError1(error);
      } finally {
        setLoading1(false);
      }
    };

    const fetchData2 = async () => {
      try {
        const response = await fetch('api_endpoint_2');
        const result = await response.json();
        setData2(result);
      } catch (error) {
        setError2(error);
      } finally {
        setLoading2(false);
      }
    };

    fetchData1();
    fetchData2();
  }, []);

  if (loading1 || loading2) {
    return <p>Loading...</p>;
  }

  if (error1 || error2) {
    return <p>Error: {error1 || error2}</p>;
  }

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

export default MyComponent;

在上面的示例中，我們使用了useState來管理數據、加載狀態和錯誤狀態。然后使用useEffect來觸發API請求，并根據請求狀態和錯誤狀態來動態渲染組件的內容。最后，我們通過條件判斷來展示加載狀態和錯誤狀態的信息。

這只是一個簡單的示例，實際應用中可能會有更復雜的情況，例如同時發起多個并行請求、處理請求參數等。但是基本思路是一樣的，即使用React Hooks和Context API來管理多個API請求的狀態和錯誤處理，以保持代碼的可讀性和可維護性。