-1
Hola, soy nuevo en ReactJS. Quiero obtener una imagen con un texto específico en el título de la API del gráfico de Instagram. Por ejemplo, si el título de la imagen tiene la palabra "sí" en Instagram, entonces debe mostrarse en la página de inicio. Intento definir Mypost con const myPost = contiene la palabra sí, pero no obtengo ningún resultado. Gracias por su ayuda.
import React,{useState} from 'react' import axios from 'axios'; import ReactDOM from "react-dom"; function Deneme() { // component variables go here const [Posts, setPosts] = useState(null); const fetchData = async () => { const response = await axios.get(`https://graph.instagram.com/me/media?fields=id,caption,media_url,permalink,username&access_token=IGQV....`) setPosts(response.data.data) }; return ( <div className="Deneme"> <h1>Game of Thrones Posts</h1> <h2>Fetch a list from an API and display it</h2> {/* Fetch data from API */} <div> <button className="fetch-button" onClick={fetchData}> Fetch Data </button> <br /> </div> {/* Display data from API */} <div className="Posts"> {Posts && Posts.map((posts, index) => { const myPost = posts.caption.contains("yes"); const cleanedDate = new Date(posts.released).toDateString(); console.log(cleanedDate) return ( <div className="posts" key={index}> <h3>posts {index + 1}</h3> <h2>{myPost.username}</h2> <div className="details"> <p>{myPost.caption} </p> <img className="post_img" src={myPost.media_url} alt="image"/> </div> </div> ); })} </div> </div> ); } export default Deneme **Ingresa el código aquí
**
No está llamando a la función fetchData en ninguna parte. Llámalo cuando el componente se renderice por primera vez con el gancho useEffect:
useEffect(() => { fetchData(); }, []);Más sobre useEffect: https://reactjs.org/docs/hooks-effect.html