Use Async/Await con Axios en React.js

Siguiendo

Cómo usar async/await con axios en reaccionar

Estoy tratando de hacer una solicitud de obtención simple a mi servidor usando Async/Await en una aplicación React.js. El servidor carga un JSON simple en /data que se parece a esto

JSON

{
   id: 1,
   name: "Aditya"
}

Puedo obtener los datos en mi aplicación React utilizando el método jquery ajax get simple. Sin embargo, quiero utilizar la biblioteca axios y Async/Await para seguir los estándares ES7. Mi código actual se ve así:

class App extends React.Component{
 async getData(){
     const res = await axios('/data');
     console.log(res.json());
 }
 render(){
     return(
         <div>
             {this.getData()}
         </div>
     );
 }
}

Usando este enfoque me sale el siguiente error:

Los objetos no son válidos como un niño React (encontrado: [object Promise]). Si tenía la intención de representar una colección de niños, use una matriz en su lugar.

¿No lo estoy implementando correctamente?

Dos cuestiones saltan a la vista:

1. Su getData nunca devuelve nada, por lo que su promesa (async funciones siempre devuelven una promesa) se cumplirá con undefined si no rechaza

2. El mensaje de error muestra claramente que estás tratando de cumplir directamente la promesa. getData devoluciones, en lugar de esperar a que se liquide y luego devolver el valor de cumplimiento

Direccionamiento #1: getData debería devolver el resultado de llamar json:

async getData(){
   const res = await axios('/data');
   return await res.json();
}

Dirección #2: Tendríamos que ver más de su código, pero fundamentalmente, no puede hacerlo

<SomeElement>{getData()}</SomeElement>

…porque eso no espera a la resolución. En su lugar, necesitarías usar getData para establecer el estado:

this.getData().then(data => this.setState({data}))
              .catch(err => { /*...handle the error...*/});

… y usa ese estado al renderizar:

<SomeElement>{this.state.data}</SomeElement>

Actualizar: ahora que nos ha mostrado su código, debe hacer algo como este:

class App extends React.Component{
    async getData() {
        const res = await axios('/data');
        return await res.json(); // (Or whatever)
    }
    constructor(...args) {
        super(...args);
        this.state = {data: null};
    }
    componentDidMount() {
        if (!this.state.data) {
            this.getData().then(data => this.setState({data}))
                          .catch(err => { /*...handle the error...*/});
        }
    }
    render() {
        return (
            <div>
                {this.state.data ? <em>Loading...</em> : this.state.data}
            </div>
        );
    }
}

Más actualización: Has indicado una preferencia por usar await en componentDidMount más bien que then y catch. Lo harías anidando un async Función IIFE dentro de él y garantizar que la función no pueda lanzar. (componentDidMount en sí mismo no puede ser asyncnada consumirá esa promesa.) Por ejemplo:

class App extends React.Component{
    async getData() {
        const res = await axios('/data');
        return await res.json(); // (Or whatever)
    }
    constructor(...args) {
        super(...args);
        this.state = {data: null};
    }
    componentDidMount() {
        if (!this.state.data) {
            (async () => {
                try {
                    this.setState({data: await this.getData()});
                } catch (e) {
                    //...handle the error...
                }
            })();
        }
    }
    render() {
        return (
            <div>
                {this.state.data ? <em>Loading...</em> : this.state.data}
            </div>
        );
    }
}

En mi experiencia de los últimos meses, me he dado cuenta de que la mejor manera de lograr esto es:

class App extends React.Component{
  constructor(){
   super();
   this.state = {
    serverResponse: ''
   }
  }
  componentDidMount(){
     this.getData();
  }
  async getData(){
   const res = await axios.get('url-to-get-the-data');
   const { data } = await res;
   this.setState({serverResponse: data})
 }
 render(){
  return(
     <div>
       {this.state.serverResponse}
     </div>
  );
 }
}

Si está tratando de hacer una solicitud de publicación en eventos como un clic, llame getData() funcione en el evento y reemplace el contenido de este modo:

async getData(username, password){
 const res = await axios.post('url-to-post-the-data', {
   username,
   password
 });
 ...
}

Además, si está realizando alguna solicitud cuando el componente está a punto de cargarse, simplemente reemplace async getData() con async componentDidMount() y cambie la función de render así:

render(){
 return (
  <div>{this.state.serverResponse}</div>
 )
}