如何延迟useEffect Hook

Question

我在一个文件上使用了 2 个 useEffects，第二个 useEffect 依赖于第一个。

有没有办法延迟第二个 useEffect 直到第一个 useEffect 的数据被获取？

const params = useParams()
const [userData, setUserData] = useState({})
const [followers, setFollowers] = useState([])

useEffect(() => getUser(params.id), [])

useEffect(() => {
    getFollowers(userData?.user?._id, auth.token)
}, [])

const getUser = async (id) => {
    const res = await getUserProfile(id)

    if (res) {
      setUserData(res)
    }
}


const getFollowers = async (id, token) => {
    const res = await getUserFollowers(id, token)
    if (res) {
      setFollowers(res)
    }
}

Answer 1

仅当第一个 useEffect 检索到其数据时才执行第二个 useEffect:

const params = useParams()
const [userData, setUserData] = useState(null) // initialize userData as null
const [followers, setFollowers] = useState([])

useEffect(() => getUser(params.id), [])

useEffect(() => {
    // wait until userData is defined to make the second call
    if (userData)
        getFollowers(userData?.user?._id, auth.token)
}, [userData])

Answer 2

制作一个 useEffect 并使其异步并使用 await 获取两个 API 函数。否则，您还有一个解决方案，可以在第二个 useEffect 中添加 userData 作为依赖项，您可以将其添加到它们的依赖项数组中。

Answer 3

看起来您想在任何时候 userData 发生变化时都获得关注者，因此请将其作为效果的依赖项：

useEffect(() => getUser(params.id), [])

useEffect(() => {
    const id = userData?.user?._id
    if (id) {
        getFollowers(id, auth.token)
    }
}, [userData?.user?._id]) // <=====

只要 ID 更改，re-run 追随者就会生效。

或者，您可以组合它们：

useEffect(() => {
    getUser(params.id), [])
    .then(userData => getFollowers(userData?.user?._id, auth.token))
    .catch(error => { /* ...handle/report error here...*/ })
}, []);

const getUser = async (id) => {
    const res = await getUserProfile(id)

    if (res) {
        setUserData(res)
    }

    return res // <==== Note returning the result as well as setting it
}

const getFollowers = async (id, token) => {
    const res = await getUserFollowers(id, token)
    if (res) {
        setFollowers(res)
    }
}

（无论哪种情况，代码都应该处理来自那些 async 函数的拒绝。）

如何延迟useEffect Hook

How can I delay useEffect Hook

javascript

reactjs

use-effect