能否嵌套Fetch调用并将所有返回数据存入单个useState？

可以实现，但你当前的代码存在几个问题：

1. 两次then回调里都用了data变量，导致变量名冲突，第二次的data会覆盖第一次的，无法正确获取第一次请求的结果。
2. 第二次调用setData时，使用的data是第二次请求的响应数据，而非组件state中存储的第一次请求结果，因此扩展运算符的使用会出错。
3. setData是异步操作，直接在第一次setData后发起第二次请求并尝试合并state，无法保证拿到最新的state值。

修正后的嵌套then写法 #

const DetailsPage = () => {
  const params = useParams();
  const { id } = params;

  const [data, setData] = useState(null)

  const fetchData = () => {
    fetch(url1, options)
      .then(response => response.json())
      .then((firstResponse) => {
        // 保存第一次请求的结果
        const firstResults = firstResponse.results;
        // 发起第二个请求并链式处理
        return fetch(url2, options)
          .then(response => response.json())
          .then((secondResponse) => {
            const secondResults = secondResponse.results;
            // 合并两个结果数组（如果需要对象形式可修改此处）
            setData([...firstResults, ...secondResults]);
            // 若需整合成对象：setData({ first: firstResults, second: secondResults });
          })
      })
      .catch(err => console.error(err))
  }

  useEffect(() => {
    fetchData()
  }, [id])

  // 组件其余逻辑
}

更易读的async/await写法 #

避免回调地狱，推荐使用async/await：

const DetailsPage = () => {
  const params = useParams();
  const { id } = params;

  const [data, setData] = useState(null)

  const fetchData = async () => {
    try {
      // 执行第一个请求
      const firstRes = await fetch(url1, options);
      const firstResponse = await firstRes.json();
      const firstResults = firstResponse.results;

      // 执行第二个请求
      const secondRes = await fetch(url2, options);
      const secondResponse = await secondRes.json();
      const secondResults = secondResponse.results;

      // 合并数据并更新state
      setData([...firstResults, ...secondResults]);
      // 对象形式合并：setData({ first: firstResults, second: secondResults });
    } catch (err) {
      console.error(err);
    }
  }

  useEffect(() => {
    fetchData()
  }, [id])

  // 组件其余逻辑
}

关键说明 #

• 合并方式可根据需求调整：如果需要将两次数据整合为一个对象，直接修改setData的参数为包含两个结果的对象即可。
• 必须在两次请求都完成后再合并数据，避免依赖异步更新的state值，确保拿到完整的两次请求结果。

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