在Table渲染ReactJS之前加载API数据

如何解决在Table渲染ReactJS之前加载API数据

我使用MobX控制我的ReactJS状态/组件，并且我还通过MobX使用异步调用来检索数据，通常在我的头文件中通过componentDidMount（）调用。

（我已经知道我的代码不是最干净的，并且很可能有错误，这使我减少了一些懈怠，因为我现在完全是自己学习/编码的，没有编程方面的教育背景）

import React from 'react';
import { Layout,Row,Col,Menu,Avatar,Tag } from 'antd';
import { inject,observer } from 'mobx-react';
import Icon from '@ant-design/icons';

const { Header } = Layout;
const { SubMenu } = Menu;

@inject('store')
@observer
class PageHeader extends React.Component {


    componentDidMount() {
      this.props.store.getOrders();
    }

例如，我不在应用程序中，但仍通过LocalStorage数据登录，然后转到页面“ http：// localhost / orders / 123456”。 123456是我的订单ID，此页面将显示其详细信息。现在考虑到我不在页面上，没有呈现DOM，对吗？正确...但是我仍然通过我的LocalStorage登录，因此当我访问该页面时-它变成空白，因为MobX必须等待API调用来检索数据。我需要能够拉出这些数据并确保将其呈现在页面上，因此我提出了一些在渲染之前需要如何检索API的方法，以确保将数据从具有指定OrderID的MobX中拉出，在本例中为123456。 / p>

以下是我制作componentDidMount的两种方法

@inject('store')
@observer
class LoadPage extends React.Component {

    state = {
      visible: false,ordernum: this.props.match.params.id,orderkey: null,}
  componentDidMount() {
    document.title = this.props.match.params.id;
    route_ordernum = this.props.match.params.id;
    if (this.props.store.orders.length === 0) {
      fetch('http://localhost:5000')
      .then(res1 => res1.json())
      .then(data => this.props.store.setOrders(data))
      .then(this.setState({
        orderkey: this.props.store.orders.filter(order => order._id.includes(route_ordernum)).map((data,key) => { return data.key })
      }))
    }
    if (this.props.store.orders.length > 0) {
      this.setState({
        orderkey: this.props.store.orders.filter(order => order._id.includes(route_ordernum)).map((data,key) => { return data.key })
      })
    }
    console.log(this.state.orderkey)
  }
    render() {

示例2

  componentDidMount() {
    document.title = this.props.match.params.id;
    route_ordernum = this.props.match.params.id;
    if (this.props.store.orders.length === 0) {
      this.props.store.getOrders().then(dataloads => {
        this.setState({
        orderkey: this.props.store.orders.filter(order => order._id.includes(route_ordernum)).map((data,key) => { return data.key })
      })
    })
    }
    if (this.props.store.orders.length > 0) {
      this.setState({
        orderkey: this.props.store.orders.filter(order => order._id.includes(route_ordernum)).map((data,key) => { return data.key })
      })
    }
    console.log(this.state.orderkey)
  }

解决方法

我只是通过MobX并使用两个单独的类来创建我的状态。

@inject('store')
@observer
class LoadMain extends React.Component {

    render() {
        return(
          this.props.store.orders.length === 0 ? <Content style={{ backgroundColor: "#ffffff" }}><center><Spinner /></center></Content> : <OrderPage ordernum={this.props.match.params.id} />
        );
    }
}