ReactJS componentDidMount 和 Fetch API

IT技术 javascript reactjs fetch-api
2021-05-20 10:48:05

刚开始使用ReactJS和JS，有没有办法将APIHelper.js中获取的JSON返回给App.jsx中的setState milkList？

我想我不了解 React 或 JS 或两者的基本原理。在 Facebook React Dev Tools 中从未定义过 DairyList 状态。

// App.jsx
export default React.createClass({
  getInitialState: function() {
    return {
      diaryList: []
    };
  },
  componentDidMount() {
    this.setState({
      dairyList: APIHelper.fetchFood('Dairy'), // want this to have the JSON
    })
  },
  render: function() {
   ... 
  }


// APIHelper.js
var helpers = {
  fetchFood: function(category) {
    var url = 'http://api.awesomefoodstore.com/category/' + category

    fetch(url)
    .then(function(response) {
      return response.json()
    })
    .then(function(json) {
      console.log(category, json)
      return json
    })
    .catch(function(error) {
      console.log('error', error)
    })
  }
}

module.exports = helpers;
2个回答

由于fetch是异步的，您需要执行以下操作：

componentDidMount() {
  APIHelper.fetchFood('Dairy').then((data) => {
    this.setState({dairyList: data});
  });
},

有用！根据 Jack 的回答进行了更改，.bind(this)在 componentDidMount() 中添加并更改fetch(url)为return fetch (url)

谢谢！我现在看到State > DairyList: Array[1041] 包含我需要的所有元素

// App.jsx
export default React.createClass({
  getInitialState: function() {
    return {
      diaryList: []
    };
  },
  componentDidMount() {
    APIHelper.fetchFood('Dairy').then((data) => {
      this.setState({dairyList: data});
    }.bind(this));
  },
  render: function() {
   ... 
  }


// APIHelper.js
var helpers = {
  fetchFood: function(category) {
    var url = 'http://api.awesomefoodstore.com/category/' + category

    return fetch(url)
    .then(function(response) {
      return response.json()
    })
    .then(function(json) {
      console.log(category, json)
      return json
    })
    .catch(function(error) {
      console.log('error', error)
    })
  }
}

module.exports = helpers;
其它你可能感兴趣的问题
上一篇使用 TestUtils.Simulate 在输入元素上创建更改事件时遇到问题 下一篇如何在react中导出c​​sv对象