Je suis nouveau pour réagir et cela a vomi tout en essayant de cartographier des données d'API. J'ai défini l'état sur un tableau mais que cette erreur se présente toujours.
3 Réponses :
Essayez de changer à c'est parce que l'API renvoie une sortie JSON avec une réponse de la clé d'articles.
import React, {Component} from 'react';
import axios from 'axios';
class Test extends Component {
state = {
articles: [],
}
componentDidMount() {
axios.get('https://newsapi.org/v2/top-headlines?country=us&apiKey=ef678d80cc70495184c2bf95d4576c9b')
.then(response => {
const articles = response;
this.setState({articles:articles.articles});
}) }
render() {
return (
<div>
<ul>
{this.state.articles.map(article =>
<li><a href={`${article.url}`}>{article.title}</a>
</li>)}
</ul>
</div>
) }
}
export default Test;
import React, {Component} from 'react'; import axios from 'axios';
class Test extends Component {
state = {
articles: [],
flag:false
}
componentDidMount() {
axios.get('https://newsapi.org/v2/top-headlines?country=us&apiKey=ef678d80cc70495184c2bf95d4576c9b')
.then(response => {
const articles = response.data;
this.setState({articles,flag:true});
}) }
render() {
let data = flag === false?"Loading...":this.state.articles.map(article => <li><a href={`${article.url}`}>{article.title}</a></li>)
return (
<div>
<ul>
{data}
</ul>
</div>
) }
}
export default Test;
this.state.data.map n'est même pas dans votre code, vous êtes sûr que c'est le bon code posté?Lorsque vous obtenez .MAP n'est pas une erreur de fonction, cet usuall signifie
données n'est pas ce que vous attendez. Dans ce cas, les données devraient être une matrice, et si la carte n'est pas présente - ce n'est pas que (en quelque sorte, en raison d'un bug). La prochaine fois que quelque chose comme ça arrive, essayez de faireconsole.log (articles) par exemple dans le rappel Axios ou à l'aide du réact de devtools pour voir les types de ProP