React v18 useEffect 获取数据依赖处理：fetchA 决定 fetchB

在 React v18 中，可以使用 async/await 和条件判断来优雅地处理 fetchA 和 fetchB 之间的依赖关系。

首先，使用 useEffect 来获取 fetchA 的数据。在 useEffect 的回调函数中，使用 async/await 来发起 fetchA 请求并获取其结果。然后，使用条件判断来确定是否继续获取 fetchB 的数据。如果 fetchA 的结果满足某个条件，才发起 fetchB 请求。

下面是一个示例代码：

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

const MyComponent = () => {
  const [dataA, setDataA] = useState(null);
  const [dataB, setDataB] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const responseA = await fetch('urlA');
        const dataA = await responseA.json();
        setDataA(dataA);

        // 根据 fetchA 的结果判断是否发起 fetchB 请求
        if (dataA.someCondition) {
          const responseB = await fetch('urlB');
          const dataB = await responseB.json();
          setDataB(dataB);
        }
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {/* 渲染获取的数据 */}
      {dataA && <div>{dataA}</div>}
      {dataB && <div>{dataB}</div>}
    </div>
  );
};

export default MyComponent;

在上述示例中，fetchA 和 fetchB 的请求是在同一个 useEffect 回调函数中完成的。根据 fetchA 的结果，使用条件判断来决定是否继续发起 fetchB 请求，并将获取的数据分别存储在 dataA 和 dataB 状态中。然后，根据 dataA 和 dataB 的值来渲染对应的数据。