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