Advertisement
Guest User

reactxadas

a guest
Jul 17th, 2018
68
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {Component} from 'react'
  2.  
  3. export default class Prueba extends Component {
  4.     state = {
  5.         data: ""//Da igual que 'tipo' de dato declares esa variable
  6.     }
  7.     componentDidMount(){
  8.         this.updateDataX();//En el componentDidMount se ejecuta una sola vez, por eso cogí los datos acá
  9.         //Es importante donde vayas a coger los datos
  10.     }
  11.  
  12.     updateDataX = () => {
  13.         this.getDataX()
  14.             .then(res => this.setState({data: res}))//Esto acá es una función, puedes poner cualquier proceso dentro solo agregandole el {}, pero como es un hilo cuidado con lo que quieras ejecutar
  15.             .catch(err => console.log(err))
  16.             //En este caso solo le pasé el response al state data. En caso de que quieras un dato X puedes poner res.datoX, res es un objeto
  17.     }
  18.     getDataX = async() => {//Un hilo
  19.         const response = await fetch("/clientes");
  20.         const body = response.json();
  21.         if(response.status != 200) throw Error(body.message)//Cualquier error en el fetch va a estar acá, eso te sale en consola. Puedes buscar los errores de data en google, 200, 500, 400, etc
  22.         return body;
  23.     }
  24.  
  25.     fetcdDataX = async() => {
  26.         const nombres = "Juan";
  27.         const apellidos = "De La Cruz";
  28.         const response = await fetch("/clientes/agregar?nombres="+nombres+"&apellidos="+apellidos);
  29.         if(response.status != 200) throw Error(body.message)
  30.         return body;
  31.     }
  32.  
  33.     sendDataX = () => {
  34.         this.fetcdDataX()
  35.             .then(res => this.setState({data: res}))//Recuerdas que en el servidor cuando se mete un dato de una vez se devuelve? Mira por qué es, para no tener que hacer otro fetch como el de ahí arriba para coger la nueva data
  36.             .catch(err => console.log(err))
  37.     }
  38.     render()
  39.     {
  40.         const {data} = this.state;
  41.         return(
  42.             <div>                
  43.                 <p>
  44.                     {data.nombres} <br/>
  45.                     {data.apellidos} <br/>                    
  46.                 </p>
  47.                 <input type="button" onClick={this.sendDataX}>Mandar dato</input>
  48.                 {/* No estoy seguro si se crea un botón así, ya esa vaina no se usa :v pero ahí tu ve */}
  49.             </div>
  50.         )
  51.     }
  52. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement