使用 addEventListener 反应 useState

Question

有人可以向我解释为什么在将 useState 中的值（通过单击按钮）从“init”更改为“new state”后 addEventListener 的回调显示值“init”而按钮中的文本为“new state”

function Test() {
    const [test, setTest] = useState("init")
    useEffect(() => {
        window.addEventListener("resize", () => console.log(test))
    }, [])

    return (
        <button style={{ marginTop: "100px" }} onClick={() => setTest("new state")}>
            {test}
        </button>
    )
}

Answer 1

添加test到您的依赖项数组useEffect：

useEffect(() => {
  const func = () => console.log(test);
  window.addEventListener("resize", func)
  return () => {
    window.removeEventListener("resize", func)
  }
}, [test])

Hooks FAQ 中解释了为什么需要这样做：为什么我在函数中看到陈旧的 props 或 state？：

您看到过时的 props 或 state 的另一个可能原因是，如果您使用了“依赖数组”优化但没有正确指定所有依赖项。例如，如果一个效果指定[]为第二个参数，但someProp在内部读取，它将继续“看到” 的初始值someProp。解决方案是删除依赖项数组，或修复它。

Answer 2

空依赖数组充当 componentDidMount。您应该将测试添加为依赖项之一，以便它再次触发

function Test() {
    const [test, setTest] = useState("init")
    useEffect(() => {
        window.addEventListener("resize", fun)
        return () => {
        window.removeEventListener("resize", fun)
    }
    }, [test])

    return (
        <button style={{ marginTop: "100px" }} onClick={() => setTest("new state")}>
            {test}
        </button>
    )
}

发生这种情况的另一个原因是功能组件正在使用过时的状态值。

事件在组件安装时使用 useEffect 注册一次。它在整个组件生命周期中具有相同的功能，并且指的是第一次定义此 eventListener 时的新鲜状态。

解决方案是使用 refs

查看https://codesandbox.io/s/serverless-thunder-5vqh9以更好地了解解决方案