//component const Clientslist = () => { const classes = useStyles() axios.get('/api/clients').then(resp => { const {clients} = resp.data console.log(clients) // i get the data on the terminal }) return( ... { clients.map(client => ( //clients is not defined <Grid key={client._id} item xs={12} sm={6} md={4}> <Card clientName={client.clientName} ... ) } //controller const get = async (req, res) => { await dbConnect() const clients = await ClientsModel.find() res.status(200).json({ success: true, clients}) }Creo que mi código de solicitud es deficiente, si alguien me ayuda a solucionar el problema e incluso un refactor de código para obtener un código mejor y más limpio. Que sería genial. Gracias.
la variable de sus clients está definida dentro del alcance dentro de la devolución de llamada de axios, y no se puede acceder desde el exterior, pero si la modificó un poco, puede guardarla dentro de una variable de estado local, como: (3 líneas nuevas están marcadas con //*** )
//component const Clientslist = () => { const classes = useStyles() //*** Adding clients var with initial value as empty array const [clients, setClients] = useState([]) //*** axios.get('/api/clients').then(resp => { const {clients} = resp.data console.log(clients) // i get the data on the terminal setClients(clients) //*** this would save the new clients in the sate })En su código, la variable de clientes está en el ámbito local de axios, por lo que no se puede acceder a ella en la declaración de devolución. Como está utilizando el componente funcional React, podemos usar useState hook que nos ayuda a rastrear el estado de la variable
//component import React, { useState } from 'react'; const Clientslist = () => { const classes = useStyles(); const [clients, setClients] = useState([]);// empty array denotes initial state axios.get('/api/clients').then(resp => { const {clients} = resp.data console.log(clients) setClients(clients); // sets the state of variable clients to the received data }) return( ... { clients.map(client => (// updated clients can be used here to display .Also check for the valid response before mapping <Grid key={client._id} item xs={12} sm={6} md={4}> <Card clientName={client.clientName} ... ) }Recursos útiles: https://reactjs.org/docs/hooks-state.html https://www.geeksforgeeks.org/what-is-usestate-in-react/