Как получить доступ к файловой системе (например, к модулю react-native-fs) с помощью проекта create-react-app? - PullRequest
2 голосов
/ 28 мая 2020

Я новичок в работе с React, но я сделал несколько руководств и чувствую себя комфортно, используя приложение create-react-app для запуска проекта и npm для установки других модулей. В частности, я следовал руководству LinkedIn Learning по созданию базового c приложения для планирования встреч в React. Короче говоря, я решил, что хочу расширить учебник, записав встречи в файл json на стороне сервера, чтобы изменения встреч сохранялись.

Моя проблема в том, что я не могу получить Node.js Модуль файловой системы или 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. Итак, я попробовал другой модуль, следуя его инструкциям по установке и связыванию, убедившись, что он находится в пакете. json и назначил его в коде с помощью «var RNFS = require ('response-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

Кто-нибудь может сказать мне, что мне не хватает? Я бы очень хотел иметь доступ к файловой системе на стороне сервера в будущих программах.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...