使用 Electron 和 React 从目录读取文件名并输出到 JSON 的方法答案

【问题标题】：Way to read filenames from directory and output to JSON with Electron & React使用 Electron 和 React 从目录读取文件名并输出到 JSON 的方法
【发布时间】：2020-05-02 21:13:04
【问题描述】：

我正在尝试使用 Electron 和 React 制作音乐播放器应用程序。构建和安装后，我已经能够访问资源/音乐文件夹中的音乐文件，但我必须提供 mp3 的确切路径。

我一直在尝试扫描目录并获取所有音乐文件名以放入 JSON 的方法，因为用户可以将自己的音乐文件添加到音乐文件夹中，以由应用程序拾取并显示在列表。

我看到的大多数解决方案都使用 node fs，但我只是想让它工作。我不断收到 TypeError: fs.readdir is not a function

任何帮助将不胜感激。

import React, { Component } from 'react';
import { Link } from "react-router-dom"
import Testpage from "./Test";
import song from '../Music/Taxi.mp3'
import FileSearch from "../filesearch";

const fileSearch = new FileSearch();

const dataPath =
    process.env.NODE_ENV === 'development'
        ? song
        : 'file:///resources/Music/Taxi.mp3';




class Home extends Component {
    constructor(props) {
        super(props);

        this.state = {};
    }

    componentDidMount() {
        fileSearch.search()
    }


    render() {
        return (
            <div id="page">
                <h1>laceHolder Home</h1>
                <div>
                    <Testpage song={dataPath}/>
                </div>
            </div>
        );
    }
}

export default Home;

const testFolder = './';
const fs = require('fs');

export default class FileSearch {

    search = () => {
        fs.readdir(testFolder, (err, files) => {
            files.forEach(file => {
                console.log(file);
            });
        });
    }
}

【问题讨论】：

您是否尝试过使用window.requires？这似乎与您有关：stackoverflow.com/questions/35428639/…
console.log() fs 看看它是否真的被导入了。

标签： javascript node.js reactjs electron

【解决方案1】：

经过数小时的查找后解决了（我对反应和电子还很陌生），

我使用下面的而不是 vanilla fs import 并且它起作用了！

const remote = window.require('electron').remote;
const electronFs = remote.require('fs');
const electronDialog = remote.dialog;

感谢您的 cmets 查看 window.require

【讨论】：