时间戳

首页 > 解决方案 > 在 UseEffect 中为两个 API 调用设置 Promise

reactjs - 在 UseEffect 中为两个 API 调用设置 Promise

问题描述

const [activities, setActivities] = useState([""]);
const [contact, setContact] = useState();
const currentActivity = activities[0]
let contactId = currentActivity.contacts


useEffect(() => {

    API.getActivities()
      .then(res => 
        setActivities(res.data)
      ).catch((err) => console.log(err))

      API.getContact(contactId)
      .then(res => 
        setActivities(res.data)
      ).catch((err) => console.log(err))

}, []);


console.log(currentActivity)
console.log(contactId)
console.log(contact)

第一次调用设置包含联系人 ID 的活动状态。我需要 id 来运行第二次呼叫以获取联系信息。我相信我需要设定一个承诺，但我被卡住了。当我运行代码时，联系人 ID 没有及时返回以拉取联系人。另一种解决方案可能是调用所有联系人并循环以匹配联系人返回的 id。当我尝试过时，“联系人”状态也返回未定义。

标签： reactjsapiasynchronousmongoosepromise

解决方案

让我知道这是否有帮助。我还没有测试过，可能需要做一些小改动。

useEffect(async() => {
    const resActivities=await API.getActivities()
    setActivities(resActivities.data) 
    const promises=resActivities.data.map(item=>API.getContact(item.contactId)) // assuming contactId property exists
    const resp=await Promises.all(promises)  
    setContact(resp.flat())
}, []);

推荐阅读