javascript - ReactJS - 如何从 json-server 迁移到 .json 文件？

Question

我有这个 db.json，我想迁移到文件。我该如何实现？我已经尝试过上面的这种方法，但它对我不起作用。当我将文件放入 src 文件夹时，出现错误消息:

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

当我将文件放入公共(public)文件夹时，它会执行相同的操作。

这是我的 db.json 文件:

 {   "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"        
       ]
     } 
 }   

我交易了这条线

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

对于这个其他

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

这导致了之前显示的错误消息。

如何从 axios 获取这些数据？我按照下面的方式从 json-server 获取数据。成功了。我想做同样的事情，但不是从 json-server 而是使用 .json 文件。

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

这是一个简单的示例，如何在保留状态方法的同时实现您的需求。

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
    })
  }

  //...

}

您也可以在没有 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: []
    };
  }

  //...

}