将const文件转换为字符串并保存在fs中

Question

我是 electrojs 的新手，所以我尝试通过 fs 将我的文件保存为 TXT 文件，如下所示：

简单常量 data.ts 文件：

export const users = [{ id: 1, name: 'a', classId: 1 }]

export const classes = [
  { id: 1, name: 'A', booksId: [1, 2] },
]

export const books = [
  { id: 1, name: 'math' },
  { id: 2, name: 'physic' },
]

export const usersScore = [
  {
    userId: 1,
    scores: [
      { bookId: 1, score: 20 },
      { bookId: 2, score: 20 },
    ]
  }
]

之后，我在 main.js 中创建一个 ipc 以保存 App.tsx 文件中的文件

main.js 文件：

ipcMain.on('saveFile', (e, data) => {
  // Convert the data to a JSON string
  const jsonData = JSON.stringify(data, null, 2)

  dialog
    .showSaveDialog({
      title: 'Select the File Path to save',
      defaultPath: path.join(__dirname, '../assets/students.txt'),
      // defaultPath: path.join(__dirname, '../assets/'),
      buttonLabel: 'Save',
      // Restricting the user to only Text Files.
      filters: [
        {
          name: 'Text Files',
          extensions: ['txt', 'docx']
        }
      ],
      properties: []
    })
    .then((file) => {
      if (!file.canceled) {

        // Creating and Writing to the sample.txt file
        fs.writeFile(file.filePath.toString(), jsonData, (err) => {
          if (err) throw err
          console.log('Saved!')
        })
      }
    })
    .catch((err) => {
      console.log('err', err)
    })
})

在我的渲染器文件中

App.tsx 文件：

import { Link } from 'react-router-dom'
import * as data from './utils/constants'
// import bridge from './utils/bridge'

function App(): JSX.Element {
  const save = () => {
    // send the data to main 
    window.electron.ipcRenderer.send('saveFile', data)
  }

  return (
    <>
      <button onClick={save}>save</button>
    </>
  )
}

export default App

但是当我单击“保存”按钮时出现此错误

我检查了 jsonData 的类型，它显示字符串！

Answer 1

您面临的问题在于导入数据的方式。 当您输入

import * as data from './utils/constants’

时，您并不是只导入您需要的内容，而是导入整个模块。

假设你想发送“常量文件”中存储的所有属性，首先你必须将它们存储在一个JS普通对象中，然后通过

send()

发送它们

类似以下内容：

// App.tsx
import { users, classes, books, usersScore } from './utils/constants';

function App(): JSX.Element {
  const save = () => {
    // Construct an object with only the necessary data
    const dataToSend = { users, classes, books, usersScore };
    // Send the data to the main process
    window.electron.ipcRenderer.send('saveFile', dataToSend);
  };

  return (
    <>
      <button onClick={save}>Save</button>
    </>
  );
}

export default App;