将状态数据传递给 ipc 函数调用

Question

问题

向渲染器发送数据的事件在使用chokidar 更改文件时触发。当文件观察器被触发并且进程将事件发送到渲染器时。

我的问题是，当EmitterEvent 被触发时，我输入了useState() 变量的当前状态，但只有初始状态被传递给我的函数。

已编辑：我的问题是我无法将更新后的data 变量传递给updateData(newData) 函数，该函数是从preload.js 内部的emitter 调用的。

---

问题

如何将状态变量data 传递给调用？

有没有一种方法可以更改我的 preload.js 以使 api.receive 函数返回一个字符串，而不必将函数传递给 emitter ？ （更多信息请查看updateData(newData)函数）

有没有更好的方法来实现这一点？

这也可以帮助我初始化第一次渲染的数据。

---

preload.js

contextBridge.exposeInMainWorld(
    "api", {
        send: (channel, data) => {
            // whitelist channels
            let validChannels = ["file", "save"];
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            let validChannels = ["file", "save"];
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender` 
                ipcRenderer.on(channel, (event, ...args) => func(...args));
            }
        },
        

    }

electron.js

function ReadNodesFileToIpc(path) {
  fs.readFile(path, (error, data) => {
    win.webContents.send("file", data);
  });
}

接收数据的组件中的代码

 function MyForceGraphComponent(){ 
  const [data, setData] = useState({ nodes: [{ id: 0, otherinfo: [] }], links: [] });
  var isDataInittiallized = 0;
  ...
 
  function updateData (newData, data) {
    if (data.nodes.length !== 1){ 
      // do stuff

      setData({ nodes:  data.nodes, links: data.links });
    }else{
      if (!isDataInittiallized){
        setData({ nodes:  newData.nodes, links: newData.links });
        isDataInittiallized = 1;
      }
    }
  }
  ...
  useEffect(() => {  
    ...
    window.api.receive("file", (bytesArray) => {
           var newData = JSON.parse(String.fromCharCode.apply(null, bytesArray));
           updateData(newData); // Check function bellow
              
         });
    ...
  }, []);
}

---

updateData(newData)（我的组件函数中的一个函数）

isDataInittiallized 是组件内的一个变量，更改已传递给emitter

data 是我在 useState() 函数中的变量data 成功。所以长度保持为 1，并且它包含与第一次初始化时相同的元素。

---

其他信息

尝试将data 变量传递给接收函数，但没有成功。

很可能在设置发射器时，传递的函数（执行JSON.parse 的函数）正在传递，之后再也没有改变。

Answer 1

由于该问题与updateData 函数中的陈旧数据有关，我建议进行以下更新：

// Simplified for the sake of brevity

function MyForceGraphComponent() {
  const [data, setData] = useState({ nodes: [{ id: 0 }] })

  // isDataInitialized needs to be tracked just as any other state
  const [isDataInitialized, setIsDataInitialized] = useState(false)

  // Wrap `updateData` in `React.useCallback` to prevent stale data
  const updateData = useCallback(
    (nextData) => {
      // skip the update, no need to update the state with existing data
      if (isDataInitialized) return;
    
      setData({ nodes: nextData.nodes })
      setIsDataInitialized(true) // set to `true` to prevent future updates
    }, 
    [isDataInitialized, setIsDataInitialized]
  )

  const handleReceivedData = useCallback(
    (bytesArray) => {
      const nextData = JSON.parse(...)
      updateData(nextData)
    }, 
    [updateData]
  )

  useEffect(() => {
    window.api.receive('file', handleReceivedData);
  }, [handleReceivedData])
}

看看这个模仿你想要做什么的例子：

• CodeSandbox

Answer 2

我发现您的代码中有一些错误。当您调用 updateData(newData) 时，data 为 null，data.nodes 将不起作用。你可以修改你的代码，“如果（数据 && data.nodes && data.nodes.length !== 1)"