Tengo una función asíncrona en un archivo ( someFile.js ) en mi aplicación React y quiero que la cadena devuelta de esa función ( someFunction ) se inserte en la página web cuando finalice. El problema es con el siguiente código, creo que la página web se carga antes de que se resuelva la promesa, por lo que la página web aparece en blanco. ¿Puede alguien ayudarme y ver si hay un problema con mi código a continuación? El siguiente código funciona cuando someFunction no es una función asíncrona.
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App.js'; import reportWebVitals from './reportWebVitals.js'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); reportWebVitals(); import Header from "./components/Header.js"; function App() { return ( <div className="container"> <Header /> </div> ); } export default App; import someFunction from "./someFile.js"; const Header = () => { let text = someFunction(); return (<h1>{text}</h1>) } export default Header; const someFunction = async () => { let x = await someAsyncFunc(); return x; //x is a string } export default someFunction;Dentro de Header.js
import {useEffect,useState} from "react"; import someFunction from "./someFile.js"; const Header = () => { const [text, setText] = useState(""); useEffect(() => { someFunction() .then((data) => setText(data)) .catch((err) => console.log(err)); }, []); return (<h1>{text}</h1>) } export default Header;Recuerda el concepto de inmutabilidad en React.js, deberías hacer algo como esto:
import someFunction from "./someFile.js"; import { useState, useEffect, useCallback } from 'react'; const Header = () => { const [text, setText] = useState(''); const getApiText = useCallback(async () => { let apiReturnText = await someFunction(); setText(apiReturnText); }, []) useEffect(() => { getApiText(); }, [getApiText]) return (<h1>{text}</h1>) } export default Header;