Je travaille sur un clone de pirate de pirate, j'essaie d'obtenir les identifiants des principales histoires de leur API à l'aide de Axios dans ComponentDidMount, puis de faire un autre appel Axios pour obtenir les histoires et les pousser dans une matrice d'état, mais quand j'essaie Pour cartographier et rendre ce tableau Rien ne montre
class App extends Component {
constructor(props) {
super(props);
this.state = {
posts: []
}
}
componentDidMount() {
axios.get('https://hacker-news.firebaseio.com/v0/topstories.json')
.then( result => {
result.data.slice(0, 10).forEach(element => {
axios.get('https://hacker-news.firebaseio.com/v0/item/' + element + '.json')
.then( value => {
this.state.posts.push(value)
})
.catch(err =>{
console.log(err)
})
})
})
.catch(err => {
console.log(err);
})
}
render() {
return (
<div>
<Header title="Hacker News" />
{this.state.posts.map( (element, index) => <Post key={element.data.id} serialNum={index} postTitle={element.data.title} postVotes={element.data.score} postAuthor={element.data.by} />) }
</div>
)
}
}
3 Réponses :
utilise composantDidMount () est appelé après rendu () une seule fois. Réagir ne connaît pas les changements d'état à moins que vous n'utilisiez setstate () . this.setstate ({Posts: [Valeur ,. .Cetis.state.posts]}) au lieu de this.state.posts.push (valeur) . Utilisation ... (Spread Operateur) ajoute la valeur à la matrice d'affichage d'origine.
Si vous utilisez async / attendre, il n'y a pas besoin de chaîner ..Chen et .Catch. Et cela ne va pas à l'astuce. ceci.post.posts ne contiendra que le dernier message de Hacker-News, car vous remplacez l'état dans la boucle de Foreach
Merci pour la correction. J'utilise des méthodes séparées pour les appels HTTP, c'est donc devenu une habitude. Le problème était qu'il utilisait des pousses qui réagissent ne sait pas comme un changement d'état. Il est préférable d'extraire l'appel HTTP dans une méthode séparée et d'attendre la réponse.
Essayez de régler l'état comme ceci: de cette façon que vous utilisez SETState et ajoute chaque nouvelle valeur à l'état existant. < / p>
Comme indiqué dans les commentaires, n'utilisez pas la poussée à l'état défini. Dans votre code lorsque vous faites la deuxième demande, vous devez modifier la méthode code> setState code> pour étaler la nouvelle valeur.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: []
}
}
componentDidMount() {
axios.get('https://hacker-news.firebaseio.com/v0/topstories.json')
.then( result => {
result.data.slice(0, 10).forEach(element => {
axios.get('https://hacker-news.firebaseio.com/v0/item/' + element + '.json')
.then( value => {
this.setState(prevState => ({posts: [ value.data, ...prevState.posts]}))
})
.catch(err =>{
console.log("err");
console.log(err);
})
})
})
.catch(err => {
console.log(err);
})
}
render() {
return (
<div>
{this.state.posts && this.state.posts.map( (element, index) =>
<div key={element.id}>
{element.title}
</div>
)}
</div>
);
}
}
Ne faites pas cela:
this.state.posts.push (valeur) à la place, créez un tableau et dothis.setstate ({Posts: Newarray})Oui j'ai essayé aussi que cela ne montre toujours pas, la chose étrange est que lorsque j'essaie de consoler.log (this.state.posts) Le tableau apparaît correctement dans la console mais rien ne se présente dans le rendu