Sigo recibiendo este error. Funcionó anteriormente, pero con el tiempo comenzó a darme el error.
Intenté cambiar la función de flecha a una función estándar. También intenté usar el mismo código en una aplicación diferente, y funcionó. Pero por alguna razón solo recibo el error en esta aplicación.
import React, { Component } from 'react';
import NewSingle from './NewSingle';
import Error from './Error';
class News extends Component {
constructor(props) {
super(props);
this.state = {
news: [],
error: false,
};
}
componentDidMount() {
const url = `https://newsapi.org/v2/${this.props.news.type}?${this.props.news.query}&apiKey=ae3aff618e7d4b71b666bd9d0b10f053`;
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
this.setState({
news: data.articles
})
})
.catch((error) => {
this.setState({
error: true
})
});
}
renderItems() {
if (!this.state.error) {
return this.state.news.map((item) => (
<NewSingle key={item.url} item={item} />
));
} else {
return <Error />
}
}
render() {
return (
<div className="row">
{this.renderItems()}
</div>
);
}
}
export default News;
import React from 'react';
const NewSingle = ({item}) => (
<div className='col s4'>
<div className='card'>
<div className='card-image'>
<img src={item.urlToImage} alt={item.title} />
<span className='card-title'>{item.source.name}</span>
</div>
<div className='card-content'>
<p>{item.title}</p>
</div>
<div className='card-action'>
<a href={item.url} target='_blank' rel="noopener noreferrer">Full article</a>
</div>
</div>
</div>
);
export default NewSingle;
Se supone que la API representa datos de noticias de la API.
3 respuestas
No creo que fetch
funcione como esperabas. Incluso en una solicitud incorrecta, no arrojará un error, lo que significa que data.articles
a veces será indefinido. fetch
establece response.ok
dependiendo de si fue exitoso, por lo que puede usarlo para verificar antes de continuar.
Intenta cambiar tu búsqueda a algo como esto:
fetch(url)
.then((response) => {
// Add this check and throw an error if it fails
if (!response.ok) {
throw Error(response.statusText);
}
return response.json();
})
.then((data) => {
this.setState({
news: data.articles
})
})
.catch((error) => {
this.setState({
error: true
})
});
Otra cosa a destacar, newsapi.org requiere q=query
, así que asegúrese de que this.props.news.query
incluye q=...
, o agréguelo antes como: https://newsapi.org/v2/${this.props.news.type}?q=${this.props.news.query}
Dado que error
solo se establece después de la búsqueda y no está comprobando si news
realmente contiene datos, debe agregar un condicional antes de return
en su renderizado, o cambiar el condicional en renderItems a if (!this.state.error && (this.state.news && this.state.news.length))
.
Intenta proteger el código
if (!this.state.error) {
return this.state.news.length> 0 && this.state.news.map((item) => (
<NewSingle key={item.url} item={item} />
));
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.