Como sugiere el título, estoy tratando de obtener un objeto de una matriz utilizando el índice obtenido de otra matriz separada. Recibo el error: TypeError no detectado: lugares [índice]. El mapa no es una función.
venues = [ {id: 4, title: "bro"}, {id: 5, title: "np bro"} ] cityArray = [4, 5, 5, 4, 5, 5]Arriba están los lugares y cityArray.
Obtuve el índice correctamente. Despachos funciona correctamente.
const Home = () => { const { city } = useParams(); const featured = useSelector((state) => state.featuredList.featured); const venues = useSelector((state) => state.venueList.venues); useEffect(() => { dispatch(listVenues()) }, [dispatch]) useEffect(() => { dispatch(listFeatured()) }, [dispatch]) useEffect(() => { if (city === "perth") { setCityArray(featured?.featured_perth) } }, [featured, city]) return ( <GridWrapper> {cityArray?.map((i) => { var index = venues?.findIndex(ar => parseInt(ar.id) === i); return ( <div> {venues[0].map(arr => ( <div> <h1>{arr.title}</h1> </div> ) )} </div> ) } )} </GridWrapper> ) } export default Home;Su error Uncaught TypeError: venues[index].map is not a function porque venues[index] se refiere a un objeto, no a una matriz, y los objetos no implementan un método de map .
Si desea continuar buscando cada objeto individualmente, simplemente puede usar find() en lugar de findIndex() para devolver el objeto en sí. (Probablemente también debería tener en cuenta los elementos que no se encuentran).
return ( <GridWrapper> {cityArray?.map((i) => { var venue = venues?.find((ar) => parseInt(ar.id) === i); return ( <div> <h1>{venue.title}</h1> </div> ); })} </GridWrapper> ); Pero si va a hacer esto repetidamente, debe crear un Map u objeto indexado por id y acceder a él directamente.
const venues = [ { id: 4, title: "bro" }, { id: 5, title: "np bro" } ]; const cityArray = [4, 5, 5, 4, 5, 5]; const venueMap = new Map(venues.map(v => [v.id, v])); return ( <GridWrapper> {cityArray?.map((id) => { const venue = venueMap.get(id); return ( <div> <h1>{venue.title}</h1> </div> ); })} </GridWrapper> );Dado que los venues son una serie de objetos, debería poder acceder a la propiedad del título con:
return ( <GridWrapper> {cityArray?.map((i) => { var index = venues?.findIndex((ar) => parseInt(ar.id) === i); return ( <div> <h1>{venues[index].title}</h1> </div> ); })} </GridWrapper> );