Estoy tratando de mapear una matriz de identificación y obtener datos relevantes para esa identificación desde una API externa en React. Aquí está mi código:
const getDetails = async () => { ids.map(async(id) => { const details = await axios.get(`url/${id}`); setIdDetails(details); }); }; getDetails();Y tratando de mostrar esos detalles en un menú desplegable como este:
{idDetails.map((detail) => { <MenuItem value={detail}>{detail.data.title}</MenuItem> })}Recibo el error de que idDetails.map no es una función. Además, intenté empujar a la matriz en lugar de establecer el estado, tampoco tuve suerte. Tengo la sensación de que estoy haciendo mal todo el proceso de obtención de datos. ¿Cuál es la mejor práctica para manejar una situación como esta?
Simplemente use setIdDetails([...idDetails, details]); para insertar los nuevos datos en la matriz.
const [idDetails, setIdDetails] = useState([]); const getDetails = async () => { ids.map(async(id) => { const details = await axios.get(`url/${id}`); setIdDetails([...idDetails, details]); }); }; getDetails();Además, realice este cambio para evitar errores específicos de datos.
{(idDetails || []).map((detail) => { <MenuItem value={detail}>{detail?.data?.title}</MenuItem> })} Nota: Espero que esté obteniendo details como un objeto aquí const details = await axios.get(url/${id});
Como mencionó @SurjeetBhadauriya, use la sintaxis extendida setIdDetails([...idDetails, details]); .
Esto empujará el búfer después de distribuirlo como elementos individuales, lo que le permitirá mapearlos en su jsx.