无法使用 React 中的事件处理程序更改状态答案

【问题标题】：Not able to change the state with event handlers in React无法使用 React 中的事件处理程序更改状态
【发布时间】：2021-11-17 18:31:42
【问题描述】：

const [isToSave, setisToSave] = React.useState(false)
const myStateRef = React.useRef(isToSave);
React.useEffect(() => {
    window.addEventListener('set-is-to-save', () => {
        setisToSave(!myStateRef.current)
    }, false);
    return () => {
        window.removeEventListener('set-is-to-save', () => {
            setisToSave(!myStateRef.current)
        });
    }
}, [])

function handleOnClick(e: React.MouseEvent<HTMLDivElement>): void {
    myStateRef.current=!isToSave
    setisToSave(myStateRef.current)
}

handleOnClick 函数由 onClick 为其中一个组件调用，它似乎工作正常。但是，每当我尝试使用事件触发器更改独立组件的状态时，isToSave 的状态都不会改变。

【问题讨论】：

标签： javascript reactjs react-hooks tsx

【解决方案1】：

对于这个简单的用例，您不必使用useRef 维护状态：

您可以在此处查看我对触发自定义事件的代码的快速测试：

https://codesandbox.io/s/brave-https-4q6wd?file=/src/App.js

基本上，如果您使用带有回调的状态更新，它应该可以工作：

window.addEventListener('set-is-to-save', () => {
    setisToSave((val) => !val)
}, false);

P.S：请注意自定义事件和安全性。如果通信在同一个应用程序中，您应该使用上下文或其他状态管理。

【讨论】：

我试过了，但这似乎不起作用。状态更新功能setisToSave 不知何故不起作用。实际上我正在尝试在两个独立组件之间进行通信，如果不是自定义事件，那么我应该使用什么？
你用示例代码检查过代码沙箱吗？如果您从开发人员控制台触发相同的 windows.dispatchEv3nt，它应该可以工作。那是一回事。你可能应该使用 React 上下文。
事件触发不是问题。我确实检查了示例代码。问题是当我将更新后的状态传递给setisToSave 时，它并没有更新状态。
好的。不知道我能提供什么帮助。除了州名之外，我的代码与您的完全相同。