將狀態資料傳遞給ipc函式呼叫

問題

將資料發送到渲染器的事件在檔案更改時觸發chokidar。當檔案觀察器被觸發并且行程將事件發送到渲染器時。

我的問題是，當EmitterEvent被觸發時，我輸入了useState()變數的當前狀態，但只有初始狀態傳遞給了我的函式。

編輯：我的問題是，我不能更新傳遞data變數的updateData(newData)是從被呼叫函式emitter內preload.js。

問題

如何將狀態變數傳遞data給呼叫？

有沒有一種方法可以更改我的 preload.js 以便api.receive函式回傳一個字串，而不必將函式傳遞給emitter? （請檢查updateData(newData)功能以獲取更多資訊）

有沒有更好的方法來實作這一目標？

這也可以幫助我初始化第一次渲染的資料。

預加載.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));
            }
        },
        

    }

電子.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() 函式的變數，即使之前成功更改了更改，也沒有傳遞給emitter。所以長度保持為 1 并且它包含與第一次初始化時相同的元素。setData()data

其他資訊

嘗試將data變數傳遞給接收函式，但沒有成功。

Most probably when the emitter is getting set the function passed (the one that does JSON.parse) is getting passed along and never changed after.

uj5u.com熱心網友回復：

由于該問題與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])
}

看看這個模仿你正在做的事情的例子：

• 代碼沙盒

uj5u.com熱心網友回復：

我發現你的代碼中有一些錯誤。當您呼叫 updateData(newData) 時，資料為空，data.nodes 將不起作用。你可以修改你的代碼，“if (data && data.nodes && data.nodes.length !== 1)”

標籤：javascript reactjs d3.js electron

上一篇：應用快照后如何滾動到IndexPath

下一篇：D3.js不斷遇到此錯誤TypeError:Cannotreadpropertiesofnull(reading'ownerDocument')？