title: Mobx Observable Array
body: <p>I am stuck with this nasty error. I have an Observable array which i am filling using Axios Get request. </p>
  
  <pre><code>getVirtualMachines(){
      request.get('/Home').then(response =&gt; {
         console.log(response.data[0].name);
          this.virtualMachines = response.data;
      }).catch(error =&gt; {
          console.log(error);
      })
  } 
  </code></pre>
  
  <p>Observable Array looks like </p>
  
  <pre><code>@observable virtualMachines: [{
      id: string,
      ip: string,
      name: string,
      power: string,
      sku: string
  }]; 
  </code></pre>
  
  <p>I am calling this uisng <code>componentWillMount(){
      this.props.store.getVirtualMachines();
    }</code></p>
  
  <p>Now in the render method i am this </p>
  
  <pre><code>let vms: VirtualMachine[] = this.props.store.virtualMachines;
  console.log(vms);
  </code></pre>
  
  <p>So far so good. Now i am trying to map the Vms array using slice() to convert the observable array to vanilla array and i get errors after errors</p>
  
  <pre><code>render(){
  let vms: VirtualMachine[] = this.props.store.virtualMachines;
  console.log(vms.slice());
  ....
  ....
  }
  </code></pre>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'slice' of undefined</p>
    
    <p>warning.js:33 Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.</p>
  </blockquote>
  
  <p>i used the slice method by doing only </p>
  
  <pre><code>console.log(vms.slice());
  </code></pre>