React中的元件在狀態改變後未變更（componentDidMount fetch）

Question

我正在按照教程製作一個新聞應用程序，我正在從newapi獲取數據，我的代碼與教程中的代碼相同，但是在我更新狀態（this.state.articles）後，我的組件沒有改變。我使用了setState函數，我嘗試在控制台記錄狀態，狀態在更新後看起來很好，render方法運行了，但是沒有改變任何內容，可能出了什麼問題

我的程式碼/元件

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>
        )
    }
}

Answer 1

嗨 @Curious，你的程式碼是正確的

只需要在製作map時注意一下

你正在使用this.articles，這是一個固定（模擬）清單

你需要在this.state.articles中呼叫map，因為這是你在didMount中更改的狀態

Answer 2

this.articles 和 this.state.articles 不是相同的。

你有一個靜態屬性this.articles，你在渲染邏輯中使用了它- this.articles.map(...。你的fetch 正在更新狀態（正常操作）。

更新你的渲染邏輯，從 this.state.articles 讀取數據，然後它應該可以工作。