React中如何确保fetch获取的fundId存在后再执行后续请求

你的核心问题是两个异步请求存在依赖关系，但当前代码并行执行导致第二个请求拿不到正确的前置数据。因为setBackendData是异步更新状态的，调用fetchFund()后立刻执行fetchData()时，backendData还是初始的空对象，所以fundId只能取默认值。下面给出两种可行的解决方案：

方案1：在第一个请求完成后直接发起第二个请求 #

不需要依赖状态更新，直接在fetchFund中拿到返回数据后，立即用该数据里的ID发起第二个请求，避免等待状态异步更新的延迟：

const [backendData, setBackendData] = useState({})
const [fundData, setFundData] = useState({})

useEffect(() => {
  async function fetchFund(){
      console.log("fetching fund...");
      var query = getQueryVariable('fund');

      // 先获取基金基础数据
      const baseData = await fetch(`http://localhost:24424/api/funds?fund=${query}`)
        .then(response => response.json());
      setBackendData(baseData);

      // 确认拿到有效ID后，发起第二个请求
      const fundId = baseData[0]?._id;
      if (fundId) {
        const detailData = await fetch(`http://localhost:24424/api/funds/data?id=${fundId}`)
          .then(response => response.json());
        setFundData(detailData);
      }
  }

  fetchFund();
}, [])

这种方式逻辑更紧凑，不需要额外的状态监听，性能更优。

方案2：用第二个useEffect监听状态变化 #

把两个请求的逻辑拆分，用独立的useEffect监听backendData的变化，当它更新且包含有效ID时，再执行第二个请求：

const [backendData, setBackendData] = useState({})
const [fundData, setFundData] = useState({})

// 第一个useEffect：只负责获取基础基金数据
useEffect(() => {
  async function fetchFund(){
      console.log("fetching fund...");
      var query = getQueryVariable('fund');

      const baseData = await fetch(`http://localhost:24424/api/funds?fund=${query}`)
        .then(response => response.json());
      setBackendData(baseData);
  }

  fetchFund();
}, [])

// 第二个useEffect：监听backendData变化，有有效ID时获取详情
useEffect(() => {
  async function fetchData(){
      const fundId = backendData[0]?._id;
      if (!fundId) return; // 没有有效ID则终止执行

      const detailData = await fetch(`http://localhost:24424/api/funds/data?id=${fundId}`)
        .then(response => response.json());
      setFundData(detailData);
   }

   fetchData();
}, [backendData]) // 依赖backendData，状态更新时自动触发

这种方式逻辑分离更清晰，适合后续需要基于backendData变化重复触发请求的场景。

另外建议你统一async/await的写法，不要混用await和.then()，代码可读性会更好，比如把fetch请求改成：

const response = await fetch(`http://localhost:24424/api/funds?fund=${query}`);
const baseData = await response.json();

内容的提问来源于stack exchange，提问作者H3XXX