无法在reactjs中添加json [重复]

Question

我是 reactjs 的初学者，我正在尝试在我的 js 中导入 JSON 文件。当我使用 JSON 执行 .js 时（例如，但用前四个 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.log(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;

感谢您的帮助。

Answer 1

如果这发生在您的浏览器中，那么您将无法访问仅限于服务器端 NodeJS 的fs。您只需通过 Web api 或 window.fetch() 访问 JSON，然后只需 JSON.parse(data) 即可将其作为 JS 对象访问。

Answer 2

客户端应用程序（在浏览器中执行的应用程序）无法访问您的文件系统，因此您必须直接导入文件。仅当应用程序执行时文件已在文件系统中时才会发生这种情况。

说到做到，方法如下。

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