Electron/React 无法访问 ipcRenderer 侦听器中的组件状态更改

Question

我在使用 Electron 和 React 时遇到了一个小问题。

我正在创建一个功能组件，在 useEffect 挂钩中我订阅了 ipcRenderer 以监听 ipcMain 何时回复。

当 ipcRenderer 事件触发时，我无法访问最新的状态更新。 ipcRenderer.on 函数内的所有状态变量值都包含组件最初创建时的数据。

在下面的代码中，customers是一个数组状态变量。如果我 console.log 每次触发 ipcRenderer.on 时它的值总是空的。我绝对确定这个变量在组件的上下文中不是空的，因为它包含在网格中呈现的信息。当 ipcRenderer.on 被触发时，我的网格被重置或清除。我要做的就是在触发 ipcRenderer.on 时刷新网格中的一行。

useEffect(() => {

    // Actions triggered in response to main process replies
    ipcRenderer.on(IPCConstants.UPDATE_SALE_CUSTOMER, (event: any, arg: IUpdateResponse) => {
    
        setIsLoading(false);

        if(!arg.success) {
            notifyError(arg.message);
            return;
        }

        setCustomers(
            customers.map(cst => {
                if(cst.CUS_CustomerId === arg.customer.CUS_CustomerId){
                    cst.RowId = `${generateRandomValue()}`;
                    cst.isActive = arg.customer.isActive;
                }
                return cst;
            })
        )
    });

    return () => {
        ipcRenderer.removeAllListeners(IPCConstants.UPDATE_SALE_CUSTOMER);
    };

}, []);

Answer 1

useEffect(() => {

    // Actions triggered in response to main process replies
    ipcRenderer.on(IPCConstants.UPDATE_SALE_CUSTOMER, (event: any, arg: IUpdateResponse) => {
    
        setIsLoading(false);

        if(!arg.success) {
            notifyError(arg.message);
            return;
        }

        setCustomers(
            customers.map(cst => {
                if(cst.CUS_CustomerId === arg.customer.CUS_CustomerId){
                    cst.RowId = `${generateRandomValue()}`;
                    cst.isActive = arg.customer.isActive;
                }
                return cst;
            })
        )
    });

    return () => {
        ipcRenderer.removeAllListeners(IPCConstants.UPDATE_SALE_CUSTOMER);
    };

}, [customers, otherState (if needed)]); // <= whichever state is not up to date

您需要包含正确的依赖项。
useEffect 将与这些状态值保持同步
或者，如果您不需要 useState 的功能（不太可能），您可以使用 useRef 并且 useEffect 将始终拥有最新的 ref 而无需将其作为依赖项传递。

Electron/React 无法访问 ipcRenderer 侦听器中的组件状态更改

Electron/React cannot access component state changes in ipcRenderer listener

reactjs

electron

react-hooks

ipcrenderer

react-functional-component