反应-等待直到从API获取数据

2024-05-06 • 问答

我正在尝试获取一些JSON数据，并且已经使用async / await来保持执行，直到数据加载准备就绪为止。但是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>
    );
  }
}

输出显示未加载数据，控制台显示如下

全局

异步启动

构造函数

渲染

异步结束

数据已加载！

这是React应该如何工作的，还是我在这里丢失了一些东西？放置API调用的最佳位置是什么，以保证在组件安装之前就可以加载数据。谢谢

问题在于异步功能无法阻止功能出现在其中的代码的同步处理。我的意思是，代码的运行顺序为：

开始开始运行async功能，直到await
创建App类
...在App类之后您没有看到的其他任何东西；我猜你在某处使用App ...
顶级代码完成
计时器触发
等待计时器的诺言达成
由asycn函数调用创建的诺言得以实现

请注意，2-4发生在5-7之前。

您要选择的要么是

在拥有数据之前，不要使用App，或者
赋予App一种“等待”状态，该状态在等待数据时呈现

这些解决方案中的每一个都适用于不同的情况，因此您需要选择一种适合您情况的解决方案。

这不是React的处理方式，需要等待数据出现后再渲染。

您的代码应具有反应性，并且应触发数据已到达的组件。

这是您可以执行的操作

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

反应-等待直到从API获取数据

yyfyxzt 回答：反应-等待直到从API获取数据

大家都在问