0

I use MobX to control my ReactJS state/components and I also use an async call through MobX in order to retrieve the data, this is typically called in my header throuhg componentDidMount().

(I already know my code isn't the cleanest and most likely has errors, cut me some slack as I'm learning/coding this completely on my own at this point with no educational background in programming)

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

Say for instance I was not in the Application, but I was still logged in through my LocalStorage data, and I went to a page "http://localhost/orders/123456". 123456 would be my order ID and this page would display it's details. Now considering I was not on the page, the DOM wasn't rendered, right? Right... But I'm still logged in through my LocalStorage, so when I visit the page - it's rendering blank because MobX has to wait for the API call to retrieve the data. I need to be able to pull this data and make sure it's rendered on the page, so I some how need the API to be retrieve before rendering to ensure it's pull the data out of MobX with the specified OrderID, in this case 123456.

Below is two ways I've made my 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() {

Example #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)
  }
elisciandrello
  • 107
  • 10

1 Answers1

0

I'm just passing through my MobX and using two separate classes to create my state now.

@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} />
        );
    }
}
elisciandrello
  • 107
  • 10