Todos los artículos que he leído sobre promesas muestran ejemplos con console.log: estoy usando AWS Athena y quiero mostrar el resultado en la página web en mi exportación de React. La exportación de reacción no permite el uso de .then. Entonces necesito resolver la promesa a una variable externa.
client es un cliente de aws athena que devuelve una promesa que necesito resolver.
async function getResult(){ try { return await client.send(command); } catch (error) { return error.message; } } export default getResult()Quiero mostrar el resultado en App.js
render() { return ( { athena } )Se muestra en la consola, pero no en la página web, ya que la página se carga antes de que se resuelva la variable.
Ejemplo más completo de App.js
import athena from './athena'; class App extends Component { render() { let athena_result = athena.then(function(result) { console.log(result) } ) return ( athena_result )Error de causas
Error: Objects are not valid as a React child (found: [object Promise])El método de render de todos los componentes de React debe considerarse una función sincrónica pura. En otras palabras, no debería haber efectos secundarios ni lógica asincrónica. El error Error: Objects are not valid as a React child (found: [object Promise]) es el componente que intenta representar el objeto Promise.
Utilice el ciclo de vida del componente React para generar efectos secundarios.componentDidMount para cualquier efecto cuando se monta el componente.
class App extends Component { state = { athena: null, } componentDidMount() { athena.then(result => this.setState({ athena: result })); } render() { const { athena } = this.state; return athena; } }Si necesitaba emitir efectos secundarios más adelante después de montar el componente, entonces componentDidUpdate es el método de ciclo de vida a utilizar.
Los componentes de clase siguen siendo válidos y no hay planes para eliminarlos pronto, pero los componentes de función son realmente el camino a seguir. Aquí hay una versión de componente de función de ejemplo del código anterior.
const App = () => { const [athenaVal, setAthenaVAl] = React.useState(null); React.useEffect(() => { athena.then(result => setAthenaVAl(result)); }, []); // <-- empty dependency array -> on mount/initial render only return athenaVal; }El código es un poco más simple. Puede leer más sobre los ganchos React si lo desea.
Puede usar un estado y simplemente establecer el estado en el valor de la respuesta cuando haya terminado:
const Component = () => { const [athena, setAthena] = useState(""); // Create a state with an empty string as initial value // Send a request and on success, set the state to the response's body, and on fall set the state to the error message useEffect(() => client.send(command).then((response) => setAthena(response.data)).catch((error) => setAthena(error.message)), []); return <>{athena}</>; };