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

Question

我对使用 React 很陌生，但是我已经完成了一些教程，并且我觉得使用 create-react-app 启动项目并使用 npm 安装其他模块感觉很舒服。具体来说，我一直在关注 LinkedIn Learning 上的教程，以在 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 应用程序编译为在浏览器上工作，你不能在浏览器应用程序中使用节点文件系统，并且 React Native FS 模块是一个 React 原生包（android，ios）