如何使用Promise.all调用多API并更新React中两个不同状态？

你的代码问题在于Promise.all解析后返回的是包含两个接口数据的数组，但后续then链没有正确处理这个数组，且第一个then执行setStats后未返回值，导致后续then的参数为undefined。

修正后的代码如下：

const [stats, setStats] = useState(null);
const [info, setInfo] = useState(null);

React.useEffect(() => {
  Promise.all([
    fetch('https://api.opensea.io/api/v1/collection/nickelodeon-rugrats-heyarnold-eth/stats'),
    fetch('https://api.opensea.io/api/v1/asset_contract/0x223E16c52436CAb2cA9FE37087C79986a288FFFA')
  ])
  .then(res => Promise.all(res.map(r => r.json())))
  .then(([statsData, infoData]) => {
    // 解构数组获取两个接口的返回数据
    setStats(statsData);
    setInfo(infoData);
    console.log('Stats:', statsData, 'Info:', infoData);
  })
  .catch(error => console.error('请求出错:', error));
}, []);

关键说明： #

• Promise.all会等待所有请求完成，返回一个包含所有响应数据的数组，通过数组解构([statsData, infoData])可以直接取出两个接口的结果。
• 无需拆分多个then，在同一个then回调里同时调用两个状态更新函数即可，既简洁又避免了后续then参数丢失的问题。
• 使用console.error打印错误，能更直观地区分错误信息。

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