ReactJS-如何从json服务器迁移到.json文件？

Question

I have this db.json and I want to migrate to file. How do I implement it? I had tried this way above and it didn't work for me. When I put the file in src folder, there appears an error message:

Module not found: Can't resolve 'houses.json' in 'C:\\Users\\user\\Desktop\\dir\\src'

It does the same thing when I put the file in the public folder.

It is my db.json file:

 {   "houses": [
     {
       "id": 1,
       "name": "Title here",
       "text": "Text here",
       "photos": [
         "pic1",
         "pic2",
         "pic3"        
      ]
     },
     "houses": [
     {
       "id": 2,
       "name": "Title here",
       "text": "Text here",
       "photos": [
         "pic1",
         "pic2",
         "pic3"        
       ]
     },
     "houses": [
     {
       "id": 3,
       "name": "Title here",
       "text": "Text here",
       "photos": [
         "pic1",
         "pic2",
         "pic3"        
       ]
     } 
 }   

I had traded this line

const URL = 'http://localhost:3001/houses';

for this other

 const URL = require('houses.json');

And it caused the error message showed before.

And how do I fetch these datas from axios? I was fetching datas from json-server doing this way below. It was successfully. I want to do the same thing but not from json-server but using .json file.

const URL = 'http://localhost:3001/houses';

class House extends Component {

  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      totalHouses: [],
      currentHouse: [],
      name: [],
      photos: [],
      text: []
    };
  }

  componentDidMount() {
    axios.get(URL)
      .then(res => {
        this.setState({
          totalHouses: Object.keys(res.data),
          currentHouse: res.data
        })
      })
  }

//...rest of the code omitted

Answer 1

Here's a simple example how to achieve what you need, while preserving your state approach.

const houses = require('./houses.json');

class House extends Component {

  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      totalHouses: [],
      currentHouse: [],
      name: [],
      photos: [],
      text: []
    };
  }

  componentDidMount() {
    this.setState({
      totalHouses: Object.keys(houses.data),
      currentHouse: houses.data
    })
  }

  //...

}

You can also achieve it without componentDidMount :

const houses = require('./houses.json');

class House extends Component {

  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      totalHouses: Object.keys(houses.data),
      currentHouse: houses.data
      name: [],
      photos: [],
      text: []
    };
  }

  //...

}

Answer 2

It should be require('./houses.json'); . Right now it looks for this file inside node_modules or even higher.