Tengo dos funciones asíncronas. Uno llama al otro. Y luego el último llama a otra función que tiene una lógica y debería imprimir algo en el HTML.
llamadas a (asincrónicas) llamadas b (asincrónicas) c (debería imprimir algo)
function imprimeBlocos() { for (var i = 0; i < dados.state.subsistemas.length; i++) { console.log(dados.state.subsistemas[i].nome); //I WANNA TRANSFORM THIS CONSOLE.LOG INTO A <p> for (var j = 0; j < dados.state.pessoas.length; j++) { if (dados.state.pessoas[j].idsubsistema === dados.state.subsistemas[i].id) { console.log(dados.state.pessoas[j].nomecompleto); //I WANNA TRANSFORM THIS CONSOLE.LOG INTO A <p> } } } } async function selecionaPessoas() { //function b return Axios.post("http://localhost:3001/api/selecionaPessoas", {}).then((response) => { setPessoas(response.data); dados.setPessoas(pessoas); imprimeBlocos(); //calls function c }); } async function selecionaSubsistemas() { //function a return Axios.post("http://localhost:3001/api/selecionaSubsistemas", {}).then((response) => { setSubsistemas(response.data); dados.setSubsistemas(subsistemas); selecionaPessoas(); //calls function b }); }¿Cómo hago esto?
Debe usar un estado para guardar los datos de la función y luego, donde quiera representarlos, actualizará el árbol.
const [data, setData] = useState([]); function imprimeBlocos() { const data = data.state.subsistemas.map(({ id, nome }) => ( <React.Fragment key={id}> <p>{nome}</p> {dados.state.pessoas.map( ({ idsubsistema, nomecompleto }) => idsubsistema === id && <p>{nomecompleto}</p> )} </React.Fragment> )); setData(data); } Usando un bucle for , tengo una matriz de datos vacía inicial y la relleno con el elemento <p> válido después de la verificación de identificación.
const [data, setData] = useState([]); function imprimeBlocos() { const data = []; const subsistemas = data.state.subsistemas; for (let i = 0; i < subsistemas.length; i++) { let children = []; const subsistemasItem = subsistemas[i]; const pessoas = dados.state.pessoas; for (let j = 0; j < pessoas.length; j++) { const pessoasItem = pessosas[j]; if (pessoasItem.id === subsistemasItem.id) { children.push(( <p> {pessoasItem.nomecompleto} </p> )); } } data.push(( <React.Fragment key={subsistemasItem.id}> <p>{subsistemasItem.nome}</p> {children} </React.Fragment> )); } setData(data); }Luego, donde quieras renderizarlo, podrías hacer algo como esto
return ( <div> {data} </div> );