Почему компонент не показывает правильные значения на экране, когда внутри xhr readyState и проверки состояния

Question

Ниже приведен действительно упрощенный пример, показывающий проблему.

По сути, первый закомментированный цикл будет отображать «0 1 2 3 4» на экране, однако тот же код просто внутри readystate /проверка статуса ничего не отображает на экране (но если вы консоль логируете массив, вы можете видеть все нужные данные там)

Чего мне не хватает?

import React from "react"
import Layout from "../components/layout"
import SEO from "../components/seo"

const Results = props => {
    const Posts = []

    const Post = props => {
        return <h1>{props.title}</h1>
    }

    const xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function() {
        console.log("THIS LOGS FINE IN CONSOLE")
        // DOES DISPLAY VALUES IN BROWSER
        // for (let i = 0; i <= 4; i++) {
        //     Posts.push(<Post key={i} title={i} />)
        // }

        if (this.readyState == 4 && this.status == 200) {
            console.log("THIS LOGS FINE AS WELL IN CONSOLE")
            // DOES *NOT* DISPLAY VALUES IN BROWSER
            for (let i = 0; i <= 4; i++) {
                Posts.push(<Post key={i} title={i} />)
            }
        }
    }
    xhr.open("GET", "/index.json")
    xhr.send()

    return (
        <>
            <Layout>
                <SEO title="Search" />
                <ul data-results className="flex flex-wrap mx-auto">
                    {Posts}
                </ul>
            </Layout>
        </>
    )
}

export default Results

Answer 1

Posts должен быть частью состояния этого компонента React.К тому времени, когда вызывается onreadystatechange, Posts больше не является предметом, который React наблюдает, чтобы определить, будет ли этот компонент перерисовываться или нет.Если вы используете setState для обновления Posts (это должно быть частью штата), то React выполнит повторную визуализацию.

Я бы прочитал документацию по состоянию из Официальных документов React.