Javascript 使用React获取数据

我是React的新手，我正在尝试使用

fetch

api从服务器调用数据

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

从“es6承诺”导入{Promise}；
从“同构提取”导入提取；
让responseData=response=>{
返回响应；
};
让getData=（dataURL，标题）=>{
让结果={
数据：[]，
消息：“”
};
如果（dataURL==null | | dataURL===undefined | | dataURL====“”）{
result.message='URL不正确'；
应答数据（结果）；
}
获取（数据URL、标题）
。然后（响应=>{
if（response.ok）{
response.json（）.then（数据=>{
结果.数据=数据；
result.message=response.statusText；
应答数据（结果）；
});
}否则{
result.message='网络响应不正常'；
应答数据（结果）；
}
})
.catch（err=>console.log（err））；
};
exports.responseData=responseData；
exports.getData=getData在收到响应之前，不应尝试延迟组件的呈现和/或装载。相反，您应该使用回调来确保在请求结束后，一切都按照您的意愿得到更新

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

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


请记住，这不是实际实现的外观。在异常情况下，不会调用回调，调用代码也永远不会知道发生了什么。但本质上，这就是它的工作原理

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


只需添加
return
关键字就可以返回承诺，然后您就可以按照自己的意愿链接处理程序

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

例如，您可以在React组件的
componentWillMount
方法中执行此操作

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

您还可以通过在请求前设置一个标志并在请求后重置它（当然是回调）来控制加载面板。
结果不是数据，它是一个承诺，您可以使用它访问数据。您需要从fetch返回承诺，还需要从
返回数据，然后在
getData
中返回数据，并更新代码

获取数据更改

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

应对变化

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

您不会从
getData
函数返回任何内容，但即使返回了
result
，这也是异步的，因此您不会在
componentDidMount
中看到
result
。我理解这个问题，但每当我返回
承诺时，我应该如何通知React更新
呈现（）
函数。这篇文章回答了有关如何、何时和何地在React中获取数据的所有问题：。也许这有助于人们在偶然发现这个问题时了解它。谢谢你的回答，我试图为
结果
添加
then（）
，但是
结果总是
未定义的
，我是否应该尝试直接从
获取
返回结果？你能看看我编辑的函数调用吗？我应该如何让React知道数据并更新呈现（）两个想法，是否使用确保此条件为真？：
如果（response.ok）{
，无论哪种方式，我认为问题可能是您正在使用：
数据：[]初始化状态
但是您正在将结果设置为
项的状态：
。您可能需要更新到：
this.setState（{data:data.results}）
，假设渲染功能在
数据上运行，而不是
项目上运行，当我将
控制台.log
放在里面时，我总是看到数据已被记录，所以我认为
如果（response.ok）
是真实的，我没有首先初始化数据，我只是通过函数设置了
项
，这是正确的方法还是应该尝试初始化
this.props.items=[]
首先？如果我不直接返回获取，我将始终收到一个空白对象或
未定义的
，在这种情况下，有没有办法做出
承诺
返回？我认为在回调期间，react组件的“this”将不再在范围内