0
112
VistasEsperar el resultado de la llamada a la API y el componente de la lista de actualización
Llamo a una API REST y devuelvo las salas de chat. Esos se devuelven bien, como puedo ver en la carga útil del objeto a través de la consola.
Ahora quiero mostrar esto en una lista.
Pude mostrar una lista y descargar las salas de chat, pero no combinar ambas. Esto es lo que hice:
import * as React from 'react'; export default function ChatRoomList({param1}) { var x = getChatRoom(param1) console.log(x) return ( <div> <li>{param1}</li> <li> asd </li> <li> asd </li> </div> ); } async function getChatRoom(status) { // status could be either 'open' or 'room' var dict = { chatType: status, }; var adminChats = await callKumulosAPIFunction(dict, 'getAdminChat') return adminChats } Ahora intenté simplemente await la primera getChatRoom(param1) . Pero solo puedo esperar dentro de una función asíncrona. Luego traté de agregar la palabra clave asíncrona a la función de exportación, pero esto bloquearía toda la aplicación.
¿Cómo sería el flujo de trabajo aquí? ¿Y cómo asignaría el resultado de getChatRoom a una vista de lista?
El resultado de adminChats (console.log(adminChats)):
2 Respuestas
Responde la pregunta0
Debe usar useEffect hook para obtener datos remotos:
export default function ChatRoomList({param1}) { React.useEffect(()=>{ (async () => { var x = await getChatRoom(param1) console.log(x) })() },[]) return ( <div> <li>{param1}</li> <li> asd </li> <li> asd </li> </div> ); }Si los datos devueltos por getChatRoom son una matriz y desea mostrarlos, debe guardar la respuesta en un estado o el componente no se volverá a procesar:
export default function ChatRoomList({param1}) { const [chatRooms, setChatRooms] = React.useState([]); React.useEffect(()=>{ (async () => { var x = await getChatRoom(param1) setChatRooms(x) })() },[]) return ( <div> <li>{param1}</li> {chatRooms.map((chatRoom , index) => { return <li key={index}>{JSON.stringify(chatRoom)}</li> })} </div> ); } async function getChatRoom(status) { // status could be either 'open' or 'room' var dict = { chatType: status, }; var adminChats = await callKumulosAPIFunction(dict, 'getAdminChat') return adminChats.payload }Le sugiero que lea la documentación sobre los ganchos React y la gestión del ciclo de vida:
0
Debe usar useEffect hook para llamar a la API. Leer más sobre anzuelos
import * as React from 'react'; function getChatRoom(status) { const [chats, setChats] = React.useState([]); const getChart = async (status) => { // status could be either 'open' or 'room' const dict = { chatType: status, }; const adminChats = await callKumulosAPIFunction(dict, 'getAdminChat'); setChats(adminChats); }; React.useEffect(() => { getChart(status) }, [status]) return { chats }; }; export default function ChatRoomList({param1}) { const { chats } = getChatRoom(param1) console.log(chats) return ( <div> <li>{param1}</li> {chats?.map((chatRoom , index) => { return <li key={index}>{JSON.stringify(chatRoom)}</li> })} </div> ); } El argumento de dependencias de useEffect es useEffect(callback, dependencies)
Exploremos los efectos secundarios y las ejecuciones:
No proporcionado: el efecto secundario se ejecuta después de cada renderizado.
import { useEffect } from 'react'; function MyComponent() { useEffect(() => { // Runs after EVERY rendering }); }Una matriz vacía []: el efecto secundario se ejecuta una vez después de la representación inicial.
import { useEffect } from 'react'; function MyComponent() { useEffect(() => { // Runs ONCE after initial rendering }, []); } Tiene accesorios o valores de estado [prop1, prop2, ..., state1, state2] : el efecto secundario se ejecuta solo cuando cambia cualquier valor de dependencia.
import { useEffect, useState } from 'react'; function MyComponent({ prop }) { const [state, setState] = useState(''); useEffect(() => { // Runs ONCE after initial rendering // and after every rendering ONLY IF `prop` or `state` changes }, [prop, state]); }