async function getStudents() { var reqObj = new RequestHandler("/students/all/"); let { students } = await reqObj.sendRequest(); console.log(students, students.length); return students; } export default function Students(props) { var students = getStudents(); return ( <main className="content-section"> <h1>Students</h1> <span className="help-text"> You have {`${students.length}`} students. </span> </main> ); } ... export class RequestHandler { // Base class for handling requests constructor(url, method = "GET", contentType = "application/json") { this.url = url; this.method = method; this.contentType = contentType; this.request_conf = { method: this.method, url: this.url, headers: { "Content-Type": this.contentType, "X-CSRFToken": cookies.get("csrftoken"), }, credentials: "same-origin", }; } async sendRequest() { const response = await axios(this.request_conf); var data = isResponseOK(response); return data; } } La console.log(students, students.length); dentro de la función getStudents() me da el resultado tal como esperaba: [] 0 , pero a pesar de intentar convertirlo en una función asíncrona y todo, el componente Students aún no está undefined como valor de vuelta. ¿Cuál sería la forma más fácil de obtener el mismo valor leído dentro del componente Students ?
DESCARGO DE RESPONSABILIDAD
Soy un principiante en JavaScript y especialmente en Promises, así que si hay algo realmente simple y/u obvio que me estoy perdiendo aquí, por favor dímelo y no seas tóxico al respecto :)
La función "renderizar" de React es una función sincrónica y pura. No puede esperar a que se representen los valores. Para esto están los métodos y el estado del ciclo de vida.
Use useState para mantener la matriz de students en el estado y un useEffect con la matriz de dependencia vacía para realizar la llamada a getStudents y esperar a que Promise resuelva y ponga en cola una actualización de estado y active una nueva representación.
export default function Students(props) { // state to hold values const [students, setStudents] = React.state([]); // effect to fetch values React.useEffect(() => { getStudents().then(students => setStudents(students)); }, []); // <-- empty dependency == run once on component mount return ( <main className="content-section"> <h1>Students</h1> <span className="help-text"> You have {`${students.length}`} students. </span> </main> ); }Documentos
Si prefiere cadenas async/await a Promise:
React.useEffect(() => { const fetchStudents = async () => { try { const students = await getStudents(); setStudents(students); } catch(error) { // handle error, log it, etc... } }; fetchStudents(); }, []);