Не могу добавить json в reactjs

Я новичок в 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;

Спасибо за помощь.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
169
2

Ответы 2

Если это происходит в вашем браузере, у вас не будет доступа к fs, который ограничен серверной NodeJS. Вы просто получите доступ к JSON через веб-API или window.fetch(), а затем просто JSON.parse(data), чтобы получить доступ к нему как к объекту JS.

Я не понимаю, что мне нужно сделать для тестирования в моем браузере?

mkaczor 26.07.2018 02:43

Вероятно, отправьте файл JSON как актив и получите к нему доступ через fetch(‘assetPath’).then(response => doStuff()). Вот информация об API извлечения: developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Ben Steward 26.07.2018 02:49

Вы можете импортировать его напрямую, не выполняя выборку

Luis Gurmendez 26.07.2018 07:02

@LuisGurmendez, ты можешь сказать, что я это делаю?

mkaczor 26.07.2018 08:50

Да, я прочитал это в вашем первоначальном вопросе. Вы не можете использовать fs. Вы читали ответ Луиса?

Ben Steward 26.07.2018 08:53

да, поэтому я удаляю выборку, но что мне нужно добавить для замены fs?

mkaczor 26.07.2018 09:14

Ответ Луиса совершенно правильный, вам нужны только эти две строчки.

Ben Steward 26.07.2018 09:18

Клиентские приложения (те, которые выполняются в браузере) не имеют доступа к вашей файловой системе, поэтому вам придется напрямую импортировать файл. Это может произойти только в том случае, если файл уже находится в файловой системе при выполнении приложения.

С учетом сказанного способ сделать это следующим образом.

import people from './db/dab.json';
people = JSON.parse(people);

Но в вашем примере люди доступны только для чтения

mkaczor 26.07.2018 10:30

О, так вы хотите изменить json вашей файловой системы? Вы должны создать сервер и обновить файл с помощью HTTP-запроса. Если вы используете узел как бэкэнд, вы можете использовать библиотеку fs. Вы можете начать отсюда alligator.io/nodejs/express-basics и создать простой экспресс-сервер и определить метод публикации, в который вы включаете всю свою логику, изменяющую json. А на стороне клиента вы можете использовать axios, чтобы сделать запрос и передать объект people в качестве параметра. Надеюсь, это поможет!

Luis Gurmendez 26.07.2018 15:42

Другие вопросы по теме