Question

我对React很新，我试图用fetch api从服务器调用数据。

如果我想创建一个帮助类来获取像这样的数据

＆＃13;

import { Promise } from 'es6-promise';
import fetch from 'isomorphic-fetch';
let responseData = response => {
  return response;
};

let getData = (dataURL, headers) => {
  let result = {
    data: [],
    message: ''
  };
  if (dataURL === null || dataURL === undefined || dataURL === '') {
    result.message = 'URL is not correct';
    responseData(result);
  }
  fetch(dataURL, headers)
    .then(response =>{
      if (response.ok) {
        response.json().then(data => {
          result.data = data;
          result.message = response.statusText;
          responseData(result);
        });
      }else{
        result.message = 'Network response was not ok.';
        responseData(result);
      }
    })
    .catch(err => console.log(err));
};

exports.responseData = responseData;
exports.getData = getData;

＆＃13;

每当数据可用时，我会要求React渲染视图，在等待时间内，它会显示一个加载图标。

我将调用放在componentDidMout内，但在执行时，结果始终为undefined。

＆＃13;

componentDidMount() {
    var self = this;
    let result = util.getData('http://localhost:3001/menus');
    const { dispatch } = this.props;
    // dispatch(menuActions.fetchMenusIfNeeded());
    if (result !== null && result !== undefined) {
      if (this.isMounted()) {
        this.setState({
          items: result.data.results
        });
      }
    }
  }

＆＃13;

在Angular中，只要数据可用，它就会相应更新，但我真的不明白如何在React中进行更新。

编辑1 ：更新帮助程序类：

＆＃13;

import { Promise } from 'es6-promise';
import fetch from 'isomorphic-fetch';


let getData = (dataURL, headers) => {
  return fetch(dataURL, headers);
};

exports.getData = getData;

＆＃13;

它将始终返回Promise，因此我可以为其他组件中的数据链接处理程序。通过阅读组件中的Response对象，我需要处理消息的唯一问题。

在React组件中：

＆＃13;

componentWillMount() {
    util.getData('http://localhost:3001/menus')
      .then(response =>{
        if (response.ok) {
          response.json().then(data => {
            console.log(data);
            this.setState({
              items: data.result
            });
          });
        }
      })
      .catch(err => console.log(err));
  }

＆＃13;

但只要收到数据，render()函数已经完成，我是否应该强制它再次更新？

Answer 1

result不是数据，它是Promise，您可以使用它来访问数据。您需要从提取中返回Promise，还需要从then内的getData返回数据，并更新您的React代码。

getData change

 return fetch(dataURL, headers)
  .then(response =>{
     if (response.ok) {
       response.json().then(data => {
         result.data = data;
         result.message = response.statusText;
         return responseData(result);
       });
     } else {
       result.message = 'Network response was not ok.';
       return responseData(result);
     }
  })
  .catch(err => console.log(err));

反应更改

componentDidMount() {
   var self = this;
   let result = util.getData('http://localhost:3001/menus');
   const { dispatch } = this.props;
   // dispatch(menuActions.fetchMenusIfNeeded());
   result.then((data) => {
      if (this.isMounted()) {
        this.setState({
          items: data.results
        });
      }
   });
 }

Answer 2

在获得响应之前，不应尝试延迟组件的渲染和/或安装。相反，您应该使用回调来确保一旦请求结束，所有内容都会按照您的意愿进行更新。

您只需要修改getData的代码，以便在请求结束后执行回调。你有两个选择。

使getData函数接受第三个参数callback并在处理响应后调用此方法。这大致如下所示：

let getData = (dataURL, headers, callback) => {
  let result = {
    data: [],
    message: ''
  };
  if (dataURL === null || dataURL === undefined || dataURL === '') {
    result.message = 'URL is not correct';
    responseData(result);
  }
  fetch(dataURL, headers)
    .then(response =>{
      if (response.ok) {
        response.json().then(data => {
          result.data = data;
          result.message = response.statusText;
          responseData(result);
        });
      }else{
        result.message = 'Network response was not ok.';
        responseData(result);
      }
      callback(result);
    })
    .catch(err => console.log(err));
};

请记住，这不是实际实现的样子。如果出现异常，则不会调用回调，并且调用代码永远不会知道发生了什么。但实际上，这就是它的工作方式。

使getData函数返回fetch API创建的Promise。这是我个人使用的，因为它看起来更干净，我会在一周的任何一天采取Promise而不是回调。

let getData = (dataURL, headers) => {
  let result = {
    data: [],
    message: ''
  };
  if (dataURL === null || dataURL === undefined || dataURL === '') {
    result.message = 'URL is not correct';
    responseData(result);
  }
  return fetch(dataURL, headers)
    .then(response =>{
      if (response.ok) {
        response.json().then(data => {
          result.data = data;
          result.message = response.statusText;
          responseData(result);
        });
      }else{
        result.message = 'Network response was not ok.';
        responseData(result);
      }
      return result;
    })
    .catch(err => console.log(err));
};

只需添加return关键字即可返回Promise，然后您就可以将处理程序链接到您心中的愿望。

好的，我们如何利用这个？它实际上非常简单。现在，您可以在收到响应（或引发异常）后告诉getData方法执行某些操作。

举个例子，您可以在React组件的componentWillMount方法中执行此操作。

componentWillMount() {
    getData('http://example.com', new Headers())
        .then(function(result) {
            this.setState({ items: result });
        });
}

您还可以通过在请求之前的状态中设置标志并在请求之后重置它来控制加载面板（当然还有回调）。

使用React

2 个答案: