React + Async

Informationen som hämtas och applikationen ska uppdateras när hämtningen är klar

Ändringar i state triggar alltid en uppdatering på sidan

State blir vår förvaring, vår låda att lägga alla variabler i.

const App = {










}

const App = {
  state: {
    data: []    //"global" state
  }







}

const App = {
  state: {
    data: []    //"global" state
  },
  getDataFromApi: function(){
    




  }
}

const App = {
  state: {
    data: []    //"global" state
  },
  getDataFromApi: function(){
    fetch("https://example.com")
    .then(response => response.json())
    .then(json => {
      
    })
  }
}

const App = {
  state: {
    data: []    //"global" state
  },
  getDataFromApi: function(){
    fetch("https://example.com")
    .then(response => response.json())
    .then(json => {
      this.state.data = json;  //set global state
    })
  }
}

class App extends React.Component {
  state = {
    data: [] //"global state"
  }







}

class App extends React.Component {
  state = {
    data: [] //"global state"
  }
  getDataFromApi(){
    fetch("https://example.com")
    .then(response => response.json())
    .then(json => {

    })
  }
}

class App extends React.Component {
  state = {
    data: [] //"global state"
  }
  getDataFromApi(){
    fetch("https://example.com")
    .then(response => response.json())
    .then(json => {
      this.setState({ data : json });  //set global state
    })
  }
}

Utifrån state får vi sedan rendera ut vårt innehåll

//App.js
render(){
  const list = this.state.data.map(item => 
    <li> { item.name } </li>
  );
  return (
    <div>
      { list }
    </div>
  )
}

Component Lifecycle

import React, { Component } from 'react';
class App extends Component{}

Component har mycket mer än bara render()

Det MESTA kommer du inte behöva använda. Men det finns där.

Ett antal funktioner kallas på automatiskt

Behöver vi inte funktionen, skriv inte ut!

Mest användbara är componentDidMount()

Det vi behöver:

componentDidMount(){}

En såkallad Lifecycle method

En komponent monteras, renderas, uppdateras och när den inte ska finnas längre: avmonteras.

Den har en livscykel, den lever och dör som allt annat

Det finns speciella funktioner som körs på olika delar av livsspannet

componentDidMount(){
  fetch("https://example.com")
  .then(response => response.json())
  .then(data => {
    this.setState({ items: data });
  });
}

JSON måste plockas ut ur vårt response som är ett promise.

class App extends Component {
  state = { 

  }
  componentDidMount(){
  }
  render(){
  
  } 
}

class App extends Component {
  state = { }
  componentDidMount(){ }
  myOwnSuperMethod = () => { }
  render(){ } 
}

Observera pilarna på den egna funktionen men inte på de inbyggda

Om vi hämtar informationen i componentDidMount() sker koden automatiskt och vi vet att komponenten finns

Så kalla inte på föregående kod i konstruktorn, det kan gå fel och är onödigt p.ga. orsaker. 🤖