React use Electron app 中复杂状态对象的 State 问题

Question

我正在用 React 和 Electron 构建一个文本编辑器应用程序，以及出色的 Slate.js文本编辑器组件。我在管理州时遇到问题。法典以下是完整的主要应用程序组件：import React, { useState, useMemo, useEffect } from 'react'import { createEditor } from 'slate'import { Slate, Editable, withReact } from 'slate-react'import TopBar from './TopBar'const { ipcRenderer } = require('electron')export const createSlateValue = (text) => {  const lines = text.split('\n')  return lines.map(line => (    {      children: [{ text: line }]    }  ))}const getSlateValue = (editorValue) => editorValue.map(line => line.children[0].text).join('\n')const Editor = () => {  const [currentDocument, setCurrentDocument] = useState()  const [isDoingFileOperations, setIsDoingFileOperations] = useState(false)  const [editorValue, setEditorValue] = useState(createSlateValue(''))  const editor = useMemo(() => withReact(createEditor()), [])  const onLoadDocument = async (doc) => {    setCurrentDocument(doc)    // Load file from disk    if (doc.path) {      try {        const text = await fsReadFileAsync(doc.path)        setEditorValue(createSlateValue(text))      } catch (error) {        window.alert('An error ocurred reading the file :' + error.message)      }    } else {      setEditorValue(createSlateValue(doc.name))    }  }  const onSaveCurrentDocument = async () => {    if (isDoingFileOperations) return    setIsDoingFileOperations(true)    try {      if (!(currentDocument && currentDocument.path)) throw new Error('No file path is set')      const text = getSlateValue(editorValue)      // await fsWriteFileAsync(currentDocument.path, text)      console.log('Text 2:', JSON.stringify(editorValue, null, 2))    } catch (error) {      window.alert('An error ocurred saving the file :' + error.message)    } finally {      setIsDoingFileOperations(false)    }  }  const handleTextChange = (val) => {    setEditorValue(val)  }  const requestDocument = doc => {    ipcRenderer.send('request-document', doc)  }

Answer 1

您的 useEffect 缺少一些依赖项：

  useEffect(() => {

    const keyboardCommandListener = (event, cmd) => {

      if (cmd === 'save') onSaveCurrentDocument()

    }

    ipcRenderer.on('keyboard-command', keyboardCommandListener)

    const requestDocumentListener = (event, doc) => onLoadDocument(doc)

    ipcRenderer.on('request-document-results', requestDocumentListener)

    return () => {

      ipcRenderer.removeListener('keyboard-command', keyboardCommandListener)

      ipcRenderer.removeListener('request-document-results', requestDocumentListener)

    }

  }, [currentDocument, onSaveCurrentDocument, onLoadDocument])

// onSaveCurrentDocument, onLoadDocument were missing

你能尝试围绕这个钩子建立你的登录吗？我建议你使用埃斯林特钩子检查