如何在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请求的状态和错误处理，以保持代码的可读性和可维护性。