react v18 useEffect中获取数据fetchA和fetchB是否fetchB取决于 fetchA的结果如何优雅的处理

在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的值来渲染对应的数据