Я новичок в reactjs и пытаюсь импортировать файл JSON в свой js. Когда я выполняю the.js с помощью JSON (как в примере, но заменяю то, что находится в комментарии четырьмя первыми var), все работает, но когда я пытаюсь импортировать из другого файла, у меня появляется эта ошибка. «TypeError: fs.readFileSync не является функцией».
Первый
import React, { Component } from 'react';
import './App.css';
//import people from './db/dab.json';
var fs = require('fs');
var filname = '/db/dab.json';
var data = fs.readFileSync(filname, 'utf-8');
var people = JSON.parse(data);
console.info(people);
/*var people = [
{
"id": "johnson",
"first_name": "Karol",
"last_name": "Johnson",
"rank":"1",
},
{
"id": "smith",
"first_name": "John",
"last_name": "Smith",
"rank":"2",
]*/
function searchingFor(term){
return function (x) {
return x.first_name.toLowerCase().includes(term.toLowerCase()) || x.last_name.toLowerCase().includes(term.toLowerCase()) || x.birth_city.toLowerCase().includes(term.toLowerCase()) || x.address.address1.toLowerCase().includes(term.toLowerCase());
}
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
people: people,
term:'',
}
this.searchHandler = this.searchHandler.bind(this);
}
searchHandler(event){
this.setState({ term: event.target.value})
}
render() {
const {term, people} = this.state;
return (
<div className = "App">
<form>
<input type = "texte"
onChange = {this.searchHandler}
value = {term}
/>
</form>
{
people.filter(searchingFor(term)).map( person =>
<div key = {person.id}>
<h3>{person.rank}</h3>
)
}
</div>
);
}
}
export default App;
Спасибо за помощь.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Если это происходит в вашем браузере, у вас не будет доступа к fs, который ограничен серверной NodeJS. Вы просто получите доступ к JSON через веб-API или window.fetch(), а затем просто JSON.parse(data), чтобы получить доступ к нему как к объекту JS.
Вероятно, отправьте файл JSON как актив и получите к нему доступ через fetch(‘assetPath’).then(response => doStuff()). Вот информация об API извлечения: developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Вы можете импортировать его напрямую, не выполняя выборку
@LuisGurmendez, ты можешь сказать, что я это делаю?
Да, я прочитал это в вашем первоначальном вопросе. Вы не можете использовать fs. Вы читали ответ Луиса?
да, поэтому я удаляю выборку, но что мне нужно добавить для замены fs?
Ответ Луиса совершенно правильный, вам нужны только эти две строчки.
Клиентские приложения (те, которые выполняются в браузере) не имеют доступа к вашей файловой системе, поэтому вам придется напрямую импортировать файл. Это может произойти только в том случае, если файл уже находится в файловой системе при выполнении приложения.
С учетом сказанного способ сделать это следующим образом.
import people from './db/dab.json';
people = JSON.parse(people);
Но в вашем примере люди доступны только для чтения
О, так вы хотите изменить json вашей файловой системы? Вы должны создать сервер и обновить файл с помощью HTTP-запроса. Если вы используете узел как бэкэнд, вы можете использовать библиотеку fs. Вы можете начать отсюда alligator.io/nodejs/express-basics и создать простой экспресс-сервер и определить метод публикации, в который вы включаете всю свою логику, изменяющую json. А на стороне клиента вы можете использовать axios, чтобы сделать запрос и передать объект people в качестве параметра. Надеюсь, это поможет!
Я не понимаю, что мне нужно сделать для тестирования в моем браузере?