如何在随后的获取中使用使用效果提取的结果？

Question

我无法弄清楚如何使用带有URL参数的REST API将字段的数据从一个使用效率提取查询（使用GROQ）传递到第二个使用效率提取查询。

  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调用中的数据，没有太多信息，或者也许我无法正确地搜索我的搜索。

Answer 1

选项1-添加airline作为依赖关系到第二个使用 ，如果是null：

useEffect(() => {
  if(!airline) return;

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

选项2-将请求组合到单个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]);