Je suis un tutoriel pour créer une application d'actualités, je reçois des données de newapi, mon code est le même que dans le tutoriel, mais après avoir mis à jour l'état (this.state.articles), mon composant ne le fait pas changement. J'ai utilisé la fonction setState, j'ai essayé d'enregistrer l'état dans la console, l'état semblait correct après la mise à jour, la méthode de rendu s'est exécutée, mais rien n'a changé, quelque chose s'est peut-être mal passé
Mon code/composant
import React, { Component } from 'react' import NewsItem from './NewsItem' export default class News extends Component { articles = [ { "source": { "id": "espn-cric-info", "name": "ESPN Cric Info" }, "author": null, "title": "PCB hands Umar Akmal three-year ban from all cricket | ESPNcricinfo.com", "description": "Penalty after the batsman pleaded guilty to not reporting corrupt approaches | ESPNcricinfo.com", "url": "http://www.espncricinfo.com/story/_/id/29103103/pcb-hands-umar-akmal-three-year-ban-all-cricket", "urlToImage": "https://a4.espncdn.com/combiner/i?img=%2Fi%2Fcricket%2Fcricinfo%2F1099495_800x450.jpg", "publishedAt": "2020-04-27T11:41:47Z", "content": "Umar Akmal's troubled cricket career has hit its biggest roadblock yet, with the PCB handing him a ban from all representative cricket for three years after he pleaded guilty of failing to report det… [+1506 chars]" }, { "source": { "id": "espn-cric-info", "name": "ESPN Cric Info" }, "author": null, "title": "What we learned from watching the 1992 World Cup final in full again | ESPNcricinfo.com", "description": "Wides, lbw calls, swing - plenty of things were different in white-ball cricket back then | ESPNcricinfo.com", "url": "http://www.espncricinfo.com/story/_/id/28970907/learned-watching-1992-world-cup-final-full-again", "urlToImage": "https://a4.espncdn.com/combiner/i?img=%2Fi%2Fcricket%2Fcricinfo%2F1219926_1296x729.jpg", "publishedAt": "2020-03-30T15:26:05Z", "content": "Last week, we at ESPNcricinfo did something we have been thinking of doing for eight years now: pretend-live ball-by-ball commentary for a classic cricket match. We knew the result, yes, but we tried… [+6823 chars]" } ] constructor() { super(); this.state = { articles: this.articles, loading: false } } async componentDidMount() { const URL = "https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=" let data = await fetch(URL); let parsedData = await data.json() this.setState({ articles: parsedData.articles }) console.log(this.state.articles) } render() { console.log("render") return ( <div> <div className="container"> <h2 className='my-4 mx-4'> NewsMonkey - Top Headlines </h2> <div className="row"> {this.articles.map((elem) => { return <div className="col-md-4" key={elem.url}> <NewsItem title={elem.title?elem.title.slice(42):""} desc={elem.description?elem.description.slice(0, 88): ""} url={elem.url} imgURL={elem.urlToImage} /> </div> })} </div> </div> </div> ) } }
Salut @Curious, votre code est correct
Faites attention lors de la préparation
map
Vous utilisez
this.articles
, qui est une liste fixe (simulée)Vous devez appeler
this.state.articles
中调用map
dansthis.state.articles
car c'est l'état que vous avez modifié dans didMountthis.articles
和this.state.articles
Pas pareil.Vous disposez d'une propriété statique
this.articles
,你在渲染逻辑中使用了它 -this.articles.map(...
. Votre récupération met à jour son statut (fonctionnement normal).Mettez à jour votre logique de rendu pour lire les données de
this.state.articles
et cela devrait alors fonctionner.