Estoy llenando una tabla de datos para mostrar en mi página web. Solo se renderiza cuando interactúo con el botón ordenar. ¿Dónde debo llenar esta matriz para usarla en una tabla de datos de modo que suceda antes de la representación?
export function MyComponent() { const columns = [ { name: 'Player', selector: row => row.Player, sortable: true, }, ]; const [teamArray, setTeamArray] = useState([]) const [managerTeamList, setTeamList] = useState([]) const [bootstrapData, setBootstrapData] = useState([]) var managersteam = []; useEffect(() => { getBootstrap().then(bootstrap => { setBootstrapData(bootstrap.elements) }) getManagersTeam(27356,28).then(data => { setTeamList(data.picks) }) for (var i in managerTeamList) { for (var j in bootstrapData) { if (managerTeamList[i].element == bootstrapData[j].id) { managersteam.push({ "Player" : bootstrapData[j].second_name }) break; } } } setTeamArray(managersteam) }, []); return ( <DataTable columns={columns} data={teamArray}/> ) }Tenga en cuenta que las solicitudes de API son asíncronas ( getBootstrap y getManagersTeam ), por lo que están vacías cuando intenta recorrer los datos.
Puede usar async/await o simplemente actualizar teamArray cuando se resuelvan las promesas.
Puedes usar el siguiente código:
export function MyComponent() { const columns = [ { name: "Player", selector: (row) => row.Player, sortable: true, }, ]; const [teamArray, setTeamArray] = useState([]); const fetchData = async () => { var managersteam = []; const [bootstrap, data] = await Promise.all([ getBootstrap(), getManagersTeam(27356, 28) ]); for (var i in data.picks) { for (var j in bootstrap.elements) { if (data.picks[i].element == bootstrap.elements[j].id) { managersteam.push({ Player: bootstrap.elements[j].second_name, }); break; } } } setTeamArray(managersteam); } useEffect(() => { fetchData(); }, []); return <DataTable columns={columns} data={teamArray} />; }