Quiero hacer un sitio web de noticias usando api de noticias en reaccionar, pero no puedo mostrar artículos de json. Creo que la función de búsqueda es correcta pero imprime los datos dos veces en la consola. No sé por qué, por favor cuéntamelo si lo sabes. Además, no puedo imprimir la lista de artículos en pantalla usando map on array, por favor dígame, estoy realmente confundido.
const [News, setNews] = useState([]); useEffect(() => { fetch( `https://newsapi.org/v2/top-headlines?country=in&category=${category}&apiKey=${API_KEY}` ) .then((response) => response.json()) .then((data) => { console.log(data.articles); setNews(data.articles); }); }, [category]);A cambio, quería obtener una lista de artículos, pero solo deja la pantalla de mi escritorio en blanco, ni siquiera aparece el error.
<ul> {News.map((data) => { <li key={data.title}>{data.title}</li>; })} </ul>la consola vuelve
(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] 0: {source: {…}, author: null, title: 'E-invoicing 'soon to be mandated' for units with over ₹10-cr turnover - BusinessLine', description: null, url: 'https://news.google.com/__i/rss/rd/articles/CBMikg…b3JlLW5leHQvYXJ0aWNsZTY1NTk0OTcyLmVjZS9hbXAv?oc=5', …} 1: {source: {…}, author: null, title: 'Cancer Horoscope for July 2022 - Susan Miller Astrology Zone - Astrology Zone', description: 'The latest in astrological trends by Susan Miller,…r advancement, travel, health, fitness, and more.', url: 'https://www.astrologyzone.com/forecasts/cancer-horoscope-for-july-2022/', …} 2: {source: {…}, author: 'Riya Ghosh', title: 'iPhone User? Know all about the WhatsApp Blur Tool - Techstory', description: 'This latest technology introduced by WhatsApp enab…ent of the picture before ', …} 3: {source: {…}, author: null, title: 'Supreme Court Judge Who Heard Nupur Sharma Plea Slams "Personal Attacks" - NDTV', descripti.....} .....por favor dime que hice mal
Tienes un error tipográfico en tu código:
console.log(data.articles); setNews(data.articals);datos.artículos y datos.artículos?
Para el problema relacionado con la impresión dos veces en la consola, podría estar relacionado con el modo estricto. Si está utilizando React 18 y tiene el modo estricto activado, en el modo de desarrollo se ejecuta useEffect dos veces, en el modo de producción funcionará normalmente, es decir, una sola vez. Puede leer la documentación oficial y ver el video de Youtube que explica claramente por qué se hizo así.
Para la segunda pregunta, ¿por qué no puede imprimir la lista de artículos? Está relacionada con News.map, aquí le falta la declaración de devolución.
<ul> {News.map((data) => { return <li key={data.title}>{data.title}</li>; })} </ul>Déjame saber eso ayuda.
Problema 1: la consola está imprimiendo dos veces
Esto se debe a que useEffect se ejecutó dos veces si está utilizando React 18. Consulte la pestaña Red en Chrome Dev Tools para verificar si la solicitud se envía dos veces.
Puede usar la instrucción if/else, si los datos ya se obtuvieron, no vuelva a llamar a la API.
Problema-2 : No muestra la lista
Eso es porque te falta la declaración de devolución en la función MAP.
<ul> {News.map((data) => { return <li key={data.title}>{data.title}</li>; })} </ul>¡Espero que esto ayude!