如何在后续提取中使用 useEffect 提取的结果？

Question

我不知道如何使用带有 URL 参数的 REST API 将字段数据从一个 useEffect 提取查询（使用 GROQ）传递到第二个 useEffect 提取查询。

  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 调用中的数据使用 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]);

如何在后续提取中使用 useEffect 提取的结果？

How do I use the result of a useEffect fetch in a subsequent fetch?

reactjs

react-hooks

fetch

use-effect