时间戳

首页 > 解决方案 > 如何在 React 中使用 async/await 等待数据完成提取

javascript - 如何在 React 中使用 async/await 等待数据完成提取

问题描述

我自己对问题的回答有效，我的回答中包含的 Pedrag 的评论也有效

我正在做一个 http 请求调用，并且不想在 http 响应返回之前显示页面（请求调用是 getRoadmaps）。我有一个称为“正在加载”的 redux 状态来确定响应是否回来了？关于如何在我的代码中实现它的任何见解？我的其他 redux 状态是路线图，其中包含一个也称为路线图的对象（抱歉造成混淆）。

PS我看到了一些说要做的答案（伪代码）：如果未加载显示加载屏幕，则在渲染中加载正常屏幕。但是我的问题在渲染中不存在，但在我做的 componentWillMount() 中

this.props.getRoadmaps()

然后在我做的 3 行之后

console.log(this.displayRoadmap[0].roadmap[0])

如果 getRoadmaps() 完成，它应该成功记录路线图，看起来 getRoadmaps() 被调用，但是程序继续没有 getRoadmaps() 完全完成，这导致我的 displayRoadmap 未定义。这也会导致一些奇怪的现象，比如如果我从一个屏幕进入这个组件，它总是可以工作，但如果我刷新页面它就不起作用

import React, { Component } from "react";
import Tree from "./Tree";
import TreeSidebar from "./TreeSidebar";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { getRoadmaps } from "../actions/roadmapAction";
class OneRoadmap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: this.props.roadmap.loading,
      roadmapName: "click a white circle to show more!",
      roadmapImg:
        "https://cdn3.iconfinder.com/data/icons/harmonicons-06/64/plus-circle-512.png",
      roadmapDetail: [{ text: "Click on something" }, { text: "hi" }],
      treeData: //deleted,just the default big json object
   };
  }

  componentWillMount() {
    this.props.getRoadmaps();

    var location1 = this.props.location.pathname;
    var n = location1.slice(9);

    var current_roadmaps = this.props.roadmap.roadmaps;

    this.displayRoadmap = current_roadmaps.filter(
      eachRoadmap => eachRoadmap._id == n
    );
    // now we have a roadmap
    console.log(this.displayRoadmap[0].roadmap[0]);
    this.setState({ treeData: this.displayRoadmap[0].roadmap[0] });
    console.log("is good");
    console.log(this.props.loading);
  }

  componentDidMount() {}

  handle_on_click_change = d => {
    this.setState({ roadmapName: d.data.name });
    this.setState({ roadmapImg: d.data.img });
    if (d.data.details == undefined) {
      this.setState({
        roadmapDetail: [{ text: "The author did not put anything here" }]
      });
    } else {
      this.setState({ roadmapDetail: d.data.details });
    }
  };

  render() {
    return (
      <div>
        {console.log(this.state.loading)}
        <ul>
          <li styles={{ float: "left" }}>
            <div>
              {console.log(this.state.treeData)}
              <Tree
                on_click_change={this.handle_on_click_change}
                roadmapData={this.state.treeData}
              />
            </div>
          </li>
          <li styles={{ float: "right" }}>
            <div>
              <TreeSidebar
                displayName={this.state.roadmapName}
                displayImg={this.state.roadmapImg}
                displayDetail={this.state.roadmapDetail}
              />
            </div>
          </li>
        </ul>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  roadmap: state.roadmap
});

export default connect(
  mapStateToProps,
  { getRoadmaps }
)(OneRoadmap);

标签： javascriptreactjsreduxjsx

解决方案

就个人而言，我如何做到这一点我使用 CSS 样式我不知道这是否是最好的方法，但它对我有用，我会做这样的事情

 this state = {
      loaderStyle: 'block',
      contentStyle: 'none'
 }
componentDidMount() {
    If(this.displayRoadmap[0].length > 0) {
       this.setsState({loaderStyle: 'none', contentStyle: 
          'block:
    } else /// do something

};

在我的渲染函数中，我会这样做

 <Loader style={{display: this.state.loaderStyle}}/>

 <Content style={{display: this.state.contentStyle}}>. 
 </Content>

推荐阅读