React等待从API获取数据
React等待从API获取数据
提问于 2020-01-29 18:07:18
我正在尝试获取一些JSON数据，并且我使用了异步/等待来保持执行，直到数据加载就绪。但是React似乎完全忽略了这一点，并试图呈现组件。我已经编写了下面的简化代码来进一步测试这一点，setTimeout正在模仿API调用延迟。
console.log('global');
var index ="Data not loaded";
(async function fetchDataAsync(){
console.log('async start');
//mimcs loading data from API calls
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("Data loaded!"), 1000)
});
var index = await promise;
console.log('async end');
console.log(index);
})();
class App extends React.Component {
constructor(props){
super(props);
this.state={
randomIndex:0
}
console.log('constructor');
}
render(){
console.log('render');
return (
<div >
<p>{index}</p>
</div>
);
}
}输出显示未加载的数据，控制台如下所示
全局
异步启动
构造函数
渲染
异步端
数据加载！
这是反应应该如何运作还是我在这里遗漏了什么？放置API调用的最佳位置是什么，以确保在组件挂载之前加载数据。谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-01-29 18:12:08
问题是异步函数不能阻止函数中出现的代码的同步处理。我的意思是，您的代码运行顺序是：
- Start运行
async函数直到在App类之后您还没有显示的somewhere... - Top-level somewhere...
- Top-level代码完成
- 计时器触发
- 定时器等待定时器的承诺确定
< code >H 122由asycn函数调用创建的承诺解决H 224G 225
注意2-4发生在5-7之前。
相反，你要做的是
- 在有数据之前不要使用
App，或者 - 给
App在等待数据时呈现的“等待”状态
这些解决方案中的每一种都适用于不同的情况，因此您需要选择适合您的情况的解决方案。
Stack Overflow用户
发布于 2020-01-29 18:25:47
这不是一种做事情的反应方式，在呈现之前等待数据的出现。
您的代码应该是反应性的-ive，它应该触发数据到达的组件。
以下是你如何做到这一点
class App extends React.Component {
constructor(props){
super(props);
this.state={
randomIndex:0,
data: '',
loading: false
}
console.log('constructor');
}
fetchDataAsync = async () => {
console.log('async start');
this.setState({ loading: true });
//mimcs loading data from API calls
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("Data loaded!"), 1000)
});
var data = await promise;
console.log('async end');
console.log(data);
this.setState({ loading: false, data });
}
render(){
console.log('render');
const { loading, data } = this.state;
if(loading) return (<div className="loader">Loading ... </div>);
if (!loading && data) {
return (
<div >
<p>{data}</p>
</div>
);
}
return null;
}
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59973109
复制相关文章
相似问题
腾讯云开发者
