0
238
ViewsExtraer datos obtenidos usando el método de mapa
Estoy tratando de obtener datos del sitio web de newsapi. Me da datos como matriz como formato de objeto.
Ahora, mi objetivo es iterar estos datos y mostrar mi componente newsItem. Aquí está mi código a continuación.
export class News extends Component { constructor(){ super() this.state = { articles: this.articles } } componentDidMount(){ fetch(`https://newsapi.org/v2/top-headlines?country=us&apiKey=d21fe13361b94006b816f98a7c005003`) .then(res =>res.json()) .then(data => this.setState({articles:data.articles})) } render() { return <div className='container my-3'> <h1 className='my-3'>NewsDonkey - Top Headlines</h1> <div className="row"> {this.state.articles.map(element=> console.log(element))} <div className="col-md-4"> <NewsItem/> </div> </div> </div>; } } export default News; pero, los programas del navegador no pueden leer las propiedades de undefined. Aquí está la imagen del error. 
Ahora, puede decir que los datos pueden estar en formato de objeto, por eso el método de mapa no funciona. Probé la misma codificación en JS: artículos. mapa (elemento => consola. registro (elemento)) extrajo datos perfectamente. Por favor, ayúdenme si encuentran algún error en mi codificación.
1 answers
Answer question0
El valor inicial de state.articles es this.articles que no está undefined .
En algún momento en el futuro, asignará un valor útil a esa propiedad, pero hasta entonces no podrá tratarla como la matriz que será en el futuro pero que todavía no lo es.
Pruebe el valor y haga algo diferente.
p.ej
(!this.state.articles && <Loading />} {this.state.articles && this.state.articles.map(element=> console.log(element))}