如何使用create-react-app项目访问文件系统(如react-native-fs模块)？

Question

我刚开始使用React，但我做过一些教程，我觉得使用create-react-app启动一个项目并使用npm安装其他模块很舒服。具体地说，我一直在遵循LinkedIn学习教程，在React中创建一个基本的约会安排应用程序。简而言之，我决定通过将约会写入服务器端的一个json文件来扩展本教程，以便保留约会更改。

我的问题是，我不能让Node.js File System Module或React Native FS Module在我的项目中工作。当我尝试使用前者时，我使用以下代码：

import React from 'react';
import '../css/App.css';

import AddAppointments from './AddAppointments';
import SearchAppointments from './SearchAppointments';
import ListAppointments from './ListAppointments';

import {without} from 'lodash';
var fs = require('fs');

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      myAppointments: [],
      formDisplay: false,
      lastIndex: 0,
    };
    this.addAppointment = this.addAppointment.bind(this);
    this.deleteAppointment = this.deleteAppointment.bind(this);
    this.toggleForm = this.toggleForm.bind(this);
  }

  toggleForm() {
    this.setState({
      formDisplay: !this.state.formDisplay,
    });
  }

  addAppointment(apt) {
    let tempApts = this.state.myAppointments;
    apt.aptID = this.state.lastIndex;
    tempApts.unshift(apt);
    this.setState({
      myAppointments: tempApts,
      lastIndex: this.state.lastIndex + 1,
    });
    fs.writeFile('./data.json', tempApts, (err) => {
      if (err) throw err;
      console.log('Saved!');
    });
  }

  deleteAppointment(apt) {
    let tempApts = this.state.myAppointments;
    tempApts = without(tempApts, apt);

    this.setState({
      myAppointments: tempApts,
    })
  }

  componentDidMount() {
    fetch('./data.json')
      .then(response => response.json())
      .then(result => {
        const apts = result.map(item => {
          item.aptID = this.state.lastIndex;
          this.setState({lastIndex: this.state.lastIndex+1});
          return item;
        });
        this.setState ({
          myAppointments: apts,
        });
      });
  }

  render() {
    return (
      <main className="page bg-white" id="petratings">
        <div className="container">
          <div className="row">
            <div className="col-md-12 bg-white">
              <div className="container">
                <AddAppointments
                  formDisplay={this.state.formDisplay}
                  toggleForm={this.toggleForm}
                  addAppointment={this.addAppointment}
                />
                <SearchAppointments />
                <ListAppointments
                  appointments={this.state.myAppointments}
                  deleteAppointment={this.deleteAppointment}
                />
              </div>
            </div>
          </div>
        </div>
      </main>
    );
  }
}

export default App;

相关的一点是，我在代码顶部包含了"var fs = require('fs');“，并尝试使用"fs.writeFile()”访问文件系统(编写文件)。当我尝试这样做时，当我单击运行addAppointment()的按钮时，代码抛出一个错误：

    37 |   myAppointments: tempApts,
    38 |   lastIndex: this.state.lastIndex + 1,
    39 | });
  > 40 | fs.writeFile('./data.json', tempApts, (err) => {
       | ^  41 |   if (err) throw err;
    42 |   console.log('Saved!');
    43 | });

研究之后，我发现Node.js文件系统不能与React一起使用。因此，我尝试了另一个模块，按照它的说明安装和链接它，确保它在package.json中，并在代码中使用"var RNFS = require('react-native-fs');“，然后将其用作"RNFS.writeFile()”。这里的问题是，当我的程序无法编译时，我立即抛出了以下错误：

./node_modules/react-native-fs/FS.common.js
SyntaxError: D:\react-ui\reactinterface\node_modules\react-native-fs\FS.common.js: Unexpected token, expected "," (30:29)

  28 | };
  29 | 
> 30 | var normalizeFilePath = (path: string) => (path.startsWith('file://') ? path.slice(7) : path);
     |                              ^
  31 | 
  32 | type MkdirOptions = {
  33 |   NSURLIsExcludedFromBackupKey?: boolean; // iOS only

谁能告诉我我错过了什么？我真的希望在未来的程序中能够访问服务器端的文件系统。

Answer 1

React应用程序被编译为在浏览器上工作，你不能在浏览器应用程序中使用node FileSystem，React Native FS模块是一个React原生软件包(安卓，ios)