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你能尝试围绕这个钩子建立你的登录吗？我建议你使用埃斯林特钩子检查