En la carga de la página, estoy usando UseEffect para tomar files de una matriz de objetos. La matriz se mapea, si es masculina, se agrega a maleArray , si es femenina, se agrega a femaleArray . Al final, uso console.log para verificar si las nuevas matrices se han llenado y lo han hecho. También configuré hasLoaded en verdadero después de esto.
const[hasLoaded, setHasLoaded] = useState(); var maleArray= []; var femaleArray= []; useEffect(() => { getPersonGender(); }, [props.files]); const getPersonGender = () => { if(!props.files.length > 0){ console.log("WAITING"); }else{ props.files.map( person => { if(person.gender=== "male"){ maleArray.push(person); }else{ femaleArray.push(person); } }); console.log(maleArray) console.log(femaleArray) setHasLoaded(true); } }Sin embargo, cuando llego a la declaración de devolución, las nuevas matrices que llené parecen estar vacías. Por ejemplo, estoy tratando de asignar maleArray a una tabla. Compruebo hasLoaded y es cierto, pero cuando imprimo no aparece nada y no puedo entender por qué. Cuando intenté depurar, parecía que maleArray y femaleArray nunca se llenaron, pero sin embargo, obtengo los resultados de console.log que dicen que sí.
{!hasLoaded ?<div class="spinner-border" role="status"></div> : <table class="table"> <tbody> {maleArray.map(male=> ( <tr> <td>{male.name}</td> <td>{male.age}</td> </tr> ))} </tbody> </table> }¿Alguna razón por la que las nuevas matrices no se están llenando, pero veo el resultado en console.log? Gracias
La razón principal por la que no funcionó es que el estado no estaba establecido. Debe usar el gancho useState () para asignarlo a matrices y luego usarlos más
Ejemplo de trabajo completo
import { useState, useEffect } from "react"; function ConfigurationList(props) { const [hasLoaded, setHasLoaded] = useState(); // usage of hooks const [maleArray, setMaleArr] = useState([]); const [femaleArray, setFemaleArr] = useState([]); useEffect(() => { getPersonGender(); }, [props.files]); const getPersonGender = () => { let maleBuf = []; let femaleBuf = []; if (!props.files.length > 0) { console.log("WAITING"); } else { props.files.map((person) => { if (person.gender === "male") { maleBuf.push(person); } else { femaleBuf.push(person); } }); console.log(maleArray); console.log(femaleArray); // Setting the value to the state setFemaleArr([...femaleBuf]) setMaleArr([...maleBuf]) setHasLoaded(true); } }; return ( <div> <div class="card rounded-0"> <div class="card-header bg-dark custom-font rounded-0">Male</div> <div class="card-body text-center"> {!hasLoaded ? ( <div class="spinner-border" role="status"></div> ) : ( <table class="table"> <thead> <tr> <th style={{ width: "30%" }} scope="col"> Name </th> <th style={{ width: "30%" }} scope="col"> Age </th> </tr> </thead> <tbody> {maleArray.map((male) => ( <tr> <td>{male.name}</td> <td>{male.age}</td> </tr> ))} </tbody> </table> )} </div> </div> </div> ); } export default ConfigurationList;useState : deberá asegurarse de que la matriz no se actualice directamente, porque eso no representará los datos, por lo que debe crear una variable local y luego asignarla al estado al final, o puede usar el operador de propagación y luego asígnelos, ambos deberían funcionar.
Creo que tienes un error tipográfico en {maleArray.map(male=>
¿No debería ser { maleArray.map((masculino) => { resto del código }