Así que actualmente estoy tratando de mostrar datos en una tabla. Estos datos provienen de 2 tablas separadas en la base de datos con claves externas. Obtengo mi lista usando esta llamada:
useEffect(()=>{ axios.get("http://localhost:3001/stores").then((response)=>{ setlistofStores(response.data) //State which contains the response from the API request }); }, []);Entonces puedo obtener la lista de tiendas y mostrarlas en la tabla sin problemas usando este código:
<TableBody> {listofStores.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => ( <TableRow key={row.tenantName}> <TableCell> <Grid container> <Grid item lg={2}> <Avatar alt={row.unit} src='.' className={classes.avatar}/> </Grid> <Grid item lg={10}> <Typography className={classes.name}>{row.unit}</Typography> </Grid> </Grid> </TableCell> <TableCell>{row.contactName}</TableCell> <TableCell> <Typography className={classes.status} style={{ flex: 'center', backgroundColor: ((row.industry === 'Apparel' && 'purple') || (row.industry === 'F&B' && 'grey') || (row.industry === 'Admin' && 'red') || (row.industry === 'Tech' && 'blue')) }} >{row.industry}</Typography> </TableCell> <TableCell>{row.primaryEmail}</TableCell> <TableCell>{row.primaryPhone}</TableCell> <TableCell className={classes.stores}>1</TableCell> <TableCell ><button className={classes.viewButton} onClick={()=>{navigate(`/store/${row.id}`)}}>View</button></TableCell> </TableRow>Ahora quiero ejecutar esta API dentro de cada fila para usar el Inquilino para mostrar sus datos:
useEffect(() => { axios.get(`http://localhost:3001/store/byId/${id}`).then((response) => { setTenant(response.data); }); }, []);¿Cuál es la forma correcta de hacer esto?
useEffect con dependencias vacías es el bueno para su situación. Puede crear un nuevo componente para obtener detalles y, al hacer clic, lleve al usuario a ese componente (página). Y allí puede llamar a la API para obtener más detalles. (o puede ser una ventana emergente. Realmente depende del diseño de la interfaz de usuario)
const TenantDetails = ({ tenantId, ...props }) => { const [tenantData, setTenantData] = useState(null); useEffect(() => { axios.get(`http://localhost:3001/store/byId/${tenantId}`).then((response) => { setTenantData(response.data); }); }, []); return ( // your UI implementation <> tenantData ? <div> ... </div> : <div>loading</div> </> ) }