0
188
Vistas¿Cómo puedo renderizar dinámicamente todas las imágenes de publicaciones de usuarios con React?
Estoy tratando de representar todas las imágenes de las publicaciones de los usuarios en mi aplicación web con React en mi componente Discover . ¿Cómo puedo hacer esto? Así es como se ven los objetos en JSON:
Esto es lo que tengo actualmente en mi componente de descubrimiento.
Descubrir.jsx:
import React, {useState, useEffect} from 'react'; import {Link} from 'react-router-dom'; import {useSelector} from 'react-redux'; import UserPostsService from '../../services/user-post.service'; import './styles/Discover.css'; const Discover = () => { const [content, setContent] = useState(''); const [photoURL, setPhotoURL] = useState('/images/user-solid.jpeg'); useEffect(() => { UserPostsService.getAllPosts().then( (response) => { if (response.data.postImage) setPhotoURL(response.data.post_img_complete); }, (error) => { const _content = (error.response && error.response.data && error.response.data.message) || error.message || error.toString(); setContent(_content); } ); }, []); return ( <div className='page'> <div className='user-post'> <img src={photoURL} alt='User-Post' className='post'></img> </div> </div> ); }; export default Discover;Necesito renderizar cada post_img_completo de alguna manera, pero no estoy seguro de cómo hacerlo. ¡Cualquier ayuda se agradece, gracias!
1 Respuestas
Responde la pregunta0
Como desea representar todas las publicaciones, debe almacenar la matriz de datos en su estado. Luego, puede mapear el estado para representar todas las publicaciones.
Creo un estado llamado posts . Obtengo la matriz de datos de la respuesta y la almaceno en el estado de las posts . Ahora hago un mapa sobre el estado de las posts y renderizo cada imagen de la publicación.
import React, {useState, useEffect} from 'react'; import {Link} from 'react-router-dom'; import {useSelector} from 'react-redux'; import UserPostsService from '../../services/user-post.service'; import './styles/Discover.css'; const Discover = () => { const [content, setContent] = useState(''); // const [photoURL, setPhotoURL] = useState('/images/user-solid.jpeg'); const [posts, setPosts]=useState([]); useEffect(() => { UserPostsService.getAllPosts().then( (response) => { if (response.data) setPosts(response.data) }, (error) => { const _content = (error.response && error.response.data && error.response.data.message) || error.message || error.toString(); setContent(_content); } ); }, []); return ( <div className='page'> {posts.map((post)=>( <div className='user-post'> <img src={post.post_img_complete} alt='User-Post' className='post'/> </div> ))} </div> ); }; export default Discover;