Le composant dans React ne change pas après le changement d'état (componentDidMount fetch)
P粉384679266
P粉384679266 2023-09-12 00:02:48
0
2
506

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 ( 

NewsMonkey - Top Headlines

{this.articles.map((elem) => { return
})}
) } }

P粉384679266
P粉384679266

répondre à tous (2)
P粉724737511

Salut @Curious, votre code est correct

Faites attention lors de la préparationmap

Vous utilisezthis.articles, qui est une liste fixe (simulée)

Vous devez appelerthis.state.articles中调用mapdansthis.state.articlescar c'est l'état que vous avez modifié dans didMount

    P粉311464935

    this.articlesthis.state.articlesPas pareil.

    Vous disposez d'une propriété statiquethis.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 dethis.state.articleset cela devrait alors fonctionner.

      Derniers téléchargements
      Plus>
      effets Web
      Code source du site Web
      Matériel du site Web
      Modèle frontal
      À propos de nous Clause de non-responsabilité Sitemap
      Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!