在React入门套件中的Ajax调用

我使用React Starter Kit来创建我的第一个React应用程序，并且我正在用Ajax调用挣扎。我看到这个套件嵌入的方式进行Ajax调用（这是由应用路由内部使用的方式）：在React入门套件中的Ajax调用

import fetch from '../../core/fetch';

我在我的组件添加这个，然后尝试执行一个Ajax调用时组件加载。这里是我的代码：

componentDidMount() { 

     var moduleManager = 'https://my_domain.com/my_endpoint'; 

     async function getModules (url) { 
      const response = await fetch(url); 
      const content = await response.json(); 
      return content; 
     }; 

     this.state.modulesList = getModules(moduleManager); 

     console.log(this.state.modulesList); 
    }

我也在我的渲染功能使用的状态值：

render() { 
    var rows = []; 
    for (var i = 0; i < this.state.modulesList.length; i++) { 
     rows.push(
      <li>{this.state.modulesList[i]}<li/> 
     ); 
    }

这段代码放在一起在我的控制台登录此：

Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}

然后阿贾克斯呼叫执行（成功），我的控制台现在显示此：

Promise 
__proto__:Promise 
[[PromiseStatus]]:"resolved" 
[[PromiseValue]]:Array[16]

希望的行为当然是更新我的视图：执行ajax调用时，每个数组成员显示一行。

我错过了什么？

感谢

来源

2016-11-22 frinux

我建议做：从async功能

constructor() { 
    ... 
    // Bind your async function to your stateful component's class 
    this.getModules = this.getModules.bind(this); 
} 

async getModules(url) { 
    try { 
    // Perform the ajax call 
    const response = await fetch(url); 

    // Convert respone to json 
    const content = await response.json(); 

    // Process your content (if needed) 
    ... 

    // Call setState() here 
    this.setState({someContent: content}); 

    } catch(e) { 
    console.error(e); 
    } 
} 

componentDidMount() { 
    this.getModules(`${URL}`); 
}

你不能真正返回获取/分析数据。根据this MDN link，async函数返回promise，而不是解析后得到的实际数据。

你的情况发生了什么，是你实际上试图从一个async函数接收返回值，在一个常规（同步）函数（componentDidMount）中。您可以按照我的建议进行操作，也可以在解析和解析承诺后使用.then()来使用setState，但在实际的componentDidMount函数中。

我建议阅读约async函数和Promise继续之前。

祝你好运！

来源

2016-11-22 10:31:47

谢谢，setState做到了！ – frinux

没有测试代码，一个问题是，你是不正确modifying state directly。这不会触发render，因此您的视图不会更新。尝试setState()代替，就像这样：

<li>{this.setState({modulesList[i]})}<li/>

来源

2016-11-22 10:24:18

在React入门套件中的Ajax调用

回答

相关问题