React中useState的set函数不生效，如何正确将状态on设为true？

你的代码 #

import * as React from 'react'
let [on, setOn] = React.useState(false)

React.useEffect(() => {
    window.api.electronIpcSend("confsettings", "give-me-data-from-db");
    window.api.electronIpcOn("jitsiSetts-from-db", (event, args) => {
        console.log("conference.tsx-jitsiSetts-from-db-args.alwaysOnTopWindowEnable: ", args)
        let jitsiSetts = args
        console.log("conference.tsx-jitsiSetts.alwaysOnTopWindowEnable = args : ", jitsiSetts.alwaysOnTopWindowEnable)
        if (jitsiSetts.alwaysOnTopWindowEnable === 1) {
            console.log("It has to be set as TRUE")
            setOn(true)
            console.log("on: ", on)
        } else {
            console.log("It has to be set as FALSE")
            setOn(false)
            console.log("on: ", on)
        }
        console.log("on-2: ", on)
    })

    return () => { // clean-up function
    }
}, [])

异常输出 #

conference.tsx-jitsiSetts.alwaysOnTopWindowEnable = args :  1
It has to be set as TRUE
on:  false
on-2:  false

问题原因 #

React的setState（包括useState返回的更新函数）是异步操作，调用setOn(true)后状态不会立刻更新，所以紧接着的console.log(on)拿到的还是更新前的旧值。另外你的代码没有清理Electron的IPC监听，组件卸载后可能触发重复回调，导致内存泄漏。

解决方法 #

1. 正确查看更新后的状态 #

不要在调用setOn后立刻打印状态，改用useEffect监听on的变化，状态更新时再打印最新值。

2. 清理IPC监听 #

在useEffect的清理函数中移除IPC监听，避免组件卸载后回调仍被触发。

修改后的代码如下：

import * as React from 'react'
const [on, setOn] = React.useState(false)

// 监听on状态变化，打印更新后的值
React.useEffect(() => {
    console.log("更新后的on值: ", on)
}, [on])

React.useEffect(() => {
    // 单独定义回调函数，方便后续移除监听
    const handleJitsiSettings = (event, args) => {
        console.log("conference.tsx-jitsiSetts-from-db-args.alwaysOnTopWindowEnable: ", args)
        const jitsiSetts = args
        console.log("conference.tsx-jitsiSetts.alwaysOnTopWindowEnable = args : ", jitsiSetts.alwaysOnTopWindowEnable)
        
        if (jitsiSetts.alwaysOnTopWindowEnable === 1) {
            console.log("It has to be set as TRUE")
            setOn(true)
        } else {
            console.log("It has to be set as FALSE")
            setOn(false)
        }
    }

    window.api.electronIpcSend("confsettings", "give-me-data-from-db");
    window.api.electronIpcOn("jitsiSetts-from-db", handleJitsiSettings)

    // 清理函数：移除对应的IPC监听
    return () => {
        window.api.electronIpcOff("jitsiSetts-from-db", handleJitsiSettings)
    }
}, [])

说明 #

• 把IPC回调提取为单独函数handleJitsiSettings，确保清理时能准确移除监听，避免内存泄漏。
• 新增的useEffect依赖[on]，每当on状态更新时会自动执行，此时打印的就是最新状态值。
• 原代码中调用setOn后立刻打印on的操作可以删除，因为那时候状态还未完成更新，输出的都是旧值。

内容的提问来源于stack exchange，提问作者Raphael10