在前一个承诺完成后反应如何调用 1 个承诺？

Question

我有一个具有这种结构的 React 钩子。我想要做的是，在完成调用getUserJoinedSlotList() 并获得结果之后，然后我想调用getAllAvailableSlot() 将结果设置到useState 钩子中。

const [joinedSlotList, setJoinedSlotList] = useState(null)
const [availableSlotList, setAvailableSlotList] = useState(null)
const [isAllSlotLoading, setIsAllSlotLoading] = useState(true)

const getJoinedList = () => {
        getUserJoinedSlotList()
            .then(res => {
                setIsLoading(false)
                setJoinedSlotList(res.joined_slot)
            })
            .catch(error => {
                setIsLoading(false)
                setErrorMsg(error.message)

            })
    }


const getAvailableSlotList = () => {
        getAllAvailableSlot()
            .then(res => {
                setIsAllSlotLoading(false)  // this setting not working, at the 2nd API call
                setAllAvailableSlotList(res.slot)
            })
            .catch(error => {
                setAvailableErrMsg(error.message)
                setIsAllSlotLoading(false)
            })
    }

useEffect(() => {
        if (user !== null) {
            getJoinedList()
         }
    }, [user])

这是 getAvailableSlot() 的代码，我使用的是 Aws 放大，所以它实际上返回了 GET 请求的承诺

import { API } from 'aws-amplify';

export const getAllAvailableSlot = async () => {
    let path2 = path + '/list_all'

    return API.get(apiName, path2)
}

我尝试了什么：

把getAvailableSlotList作为getJoinedList()的回调函数放入，像这样：

const getJoinedList = (callback) => {
        getUserJoinedSlotList()
            .then(res => {
                setIsLoading(false)
                setJoinedSlotList(res.joined_slot)
            })
            .catch(error => {
                setIsLoading(false)
                setErrorMsg(error.message)

            })

        callback()
    }

then
useEffect(() => {
        if (user !== null) {
            getJoinedList(getAvailableSlotList) // put in as call back here
         }
    }, [user])

通过这个，getAllAvailableSlot 被调用，我得到了结果。但是调用setAvailableSlotList后结果没有设置，setIsAllSlotLoading(false)也不行，还是true

然后我尝试这样调用：

const getJoinedList = () => {
        getUserJoinedSlotList()
            .then(res => {
                setIsLoading(false)
                setJoinedSlotList(res.joined_slot)

               

                getAvailableSlotList() // here call the function 
            })
            .catch(error => {
                setIsLoading(false)
                setErrorMsg(error.message)

            })
    }

同样，结果与上述尝试相同。

然后我也这样尝试：

const calling = async () => {
        await getJoinedList()
        await getAvailableSlotList() //setAvailableSlotList and setAllIsLoading is not working, the 2ND CALL
    }

useEffect(() => {
        if (user !== null) {
            
                //getJoinedList()
                calling()
            
        }
    }, [user])

但是getAvailableSlotList() 设置的钩子仍然没有生效。

具体问题：

我注意到，第二次API调用成功，但是我调用的设置挂钩的后续函数，它没有任何效果。

意味着： getJoinedList() 中的所有内容都运行良好。但是当到达getAvailableSlotList()时，我可以从中得到API结果，但是setAvailableSlotList和setIsAllSlotLoading都不能在值中设置

问题：

1. 1个API调用完成后如何调用另一个API？

2. 如何在第 2 次 API 调用时设置 react hooks？

Answer 1

您的第二次尝试应该会奏效。这是一个简化的沙盒示例：https://codesandbox.io/s/romantic-bhaskara-odw6i?file=/src/App.js

关于第一次和第三次尝试出错的地方的一点解释：

第一次尝试即将完成，只是您需要将callback() 移动到.then() 块内，这实际上将您带到第二次尝试。

您使用了 async/await 的第三个请求，但问题是 getJoinedList() 和 getAvailableSlotList() 都没有返回 Promise，因此这两个请求将在同一时间发送，而无需一个等待另一个先解决。

Answer 2

最简单的解决方案实际上是通过链接将整个 getAllAvailableSlot() 函数添加到 getUserJoinedSlotList() 中。我看到你已经在使用它了，所以我不需要深入解释它。

getUserJoinedSlotList().then(res => {
    --- logic ---
    getAllAvailableSlot().then(res2 => {
       -- logic ---
    }
}

Answer 3

然后链接和它的配对可以在这里工作。

await getUserJoinedSlotList()
    .then(res => /*assign hooks data*/)
    .then(() => getAllAvailableSlot())
    .then(availableSlot => /*assign availableSlot data*/)
    .catch(e => console.log(e))