React：如何使用上下文变量作为依赖项来触发useEffect？

Question

我试图找出当 useEffect 的依赖项是 useContext 变量时如何触发它。我的上下文有一个“更新”变量，该变量在某一时刻发生变化，但没有触发效果。

import { useEffect, useState, useContext } from "react"
import context from "./Context"

const Layout = () => {
    const ctx = useContext(context)
    const [updateState, setUpdateState] = useState(ctx.update)

    useEffect(() => {
        console.log("effect fired")
    }, [updateState])

    return (
        <div>
        </div>
    )
}

export default Layout

我测试了问题是否是我的上下文“更新”变量没有改变，但确实如此。我将不胜感激。

Answer 1

你的问题是你使用了useState。这实际上 memoized/froze updateState 的值，到此组件的第一个运行。

您看到 useState 采用单个 arg（默认值）。仅用于组件的第一次渲染，以填充 updateState。当 ctx.update 更改时，useState 已经有一个默认设置 updateState，因此它被忽略。

相反，您可以完全删除 useState...

import { useEffect, useState, useContext } from "react"
import context from "./Context"

const Layout = () => {
    const { update as updateState } = useContext(context);
    // Notice I have removed the useState.

    useEffect(() => {
        console.log("effect fired")
    }, [updateState])

    return (
        <div>
        </div>
    )
}

export default Layout

React：如何使用上下文变量作为依赖项来触发useEffect？

React: how to fire useeffect using context variable as dependency?

reactjs

use-effect

use-state

use-context