我如何在后续的获取中使用useEffect获取的结果?

Question

我不知道如何通过一个字段的数据从一个useEffect获取查询(使用GROQ)到第二个useEffect获取查询使用REST API与URL参数。

  const [airline, setAirline] = useState(null);
  const [airport, setAirport] = useState(null);
  const { slug } = useParams();
  const url = "https://aviation-edge.com/v2/public/airportDatabase?key={myKeyHere}&codeIataAirport=";
  useEffect(() => {
    sanityClient
      .fetch(
        `*[slug.current == $slug]{
          ...
          hubIataCode,
          ...
        }`,
        { slug }
      )
      .then((data) => setAirline(data[0]))
      .catch(console.error);
  }, [slug]);
  useEffect(() => {
    fetch(`${url}${airline.hubIataCode}`)
      .then((response) => response.json())
      .then((data) => setAirport(data));
  }, []);

也许两者需要结合?

令我惊讶的是，没有太多关于使用第一个API调用的数据在第二个API调用中使用useEffect的信息，或者也许我不能正确地描述我的搜索。

Answer 1

选项1 -将airline添加为第二个useEffect的依赖项，如果是null则退出:

useEffect(() => {
  if(!airline) return;
  fetch(`${url}${airline.hubIataCode}`)
    .then((response) => response.json())
    .then((data) => setAirport(data));
}, [airline]);

选项2 -使用async/await将请求合并到单个useEffect:

useEffect(() => {
  const fetchData = async () => {
    try {
      const [airline] = await sanityClient.fetch(`*[slug.current == $slug]{...hubIataCode,...}`, { slug });
      const airport = await fetch(`${url}${airline.hubIataCode}`).then((response) => response.json());
      setAirline(airline);
      setAirport(airport);
    } catch (e) {
      console.error(e);
    }
  };
  
  fetchData();
}, [slug]);