Question

我怎样才能延迟 useEffect Hook

2022-03-04

1269

javascript reactjs use-effect

我在一个文件上使用 2 个 useEffect，第二个 useEffect 依赖于第一个 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 发生更改时，都会重新运行关注者效果。

或者，您可以将它们组合起来：

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 函数的拒绝。）