Necesito usar una función asíncrona en mi función render () en React. ¿Cómo podría hacer eso? Lo que estoy recibiendo ahora es solo una promesa, obviamente.

import React, { Component } from "react"; export default class FlagImage extends Component { getSrc = async name ={amp}gt; { const url = `https://restcountries.eu/rest/v2/alpha/${name}`; const res = await fetch(url); const json = res.json(); const flagURL = json.flag; return flagURL; }; render() { const { name } = this.props; return name ? {amp}lt;img alt={`Flag ${name}`} src={this.getSrc(name)} /{amp}gt; : {amp}lt;div /{amp}gt;; } } 

Su función asíncrona devuelve una promesa que no puede funcionar con src. Puede almacenar ese valor en estado y usarlo.

 import React, { Component } from "react"; export default class FlagImage extends Component { state = { imageSrc: "" } getSrc = async name ={amp}gt; { const url = `https://restcountries.eu/rest/v2/alpha/${name}`; const res = await fetch(url); const json = res.json(); const flagURL = json.flag; setState({imageSrc: flagURL}) }; componentDidMount() { this.getSrc(); } render() { const { name } = this.props; return name ? {amp}lt;img alt={`Flag ${name}`} src={this.state.imageSrc} /{amp}gt; : {amp}lt;div /{amp}gt;; } } 

Debería hacer ese tipo de cosas en el método del ciclo de vida de componentDidMount.

¿Puedes probar esto?

 import React, { Component } from "react"; export default class FlagImage extends Component { state = { url = '' }; componentDidMount () { let url = this.getSrc(); this.setState({ url }); } getSrc = async name ={amp}gt; { const url = `https://restcountries.eu/rest/v2/alpha/${name}`; const res = await fetch(url); const json = res.json(); const flagURL = json.flag; return flagURL; }; render() { const { name } = this.props; return name ? {amp}lt;img alt={`Flag ${name}`} src={this.state.url} /{amp}gt; : {amp}lt;div /{amp}gt;; } } 

Llame a esa función dentro del método del ciclo de vida

 componentDidMount(){ this.getSrc(); }