Reactjs 为什么组件在xhr readyState和状态检查中未在屏幕上显示正确的值

下面是一个非常简单的例子，展示了这个问题

基本上，第一个注释掉的for循环将在屏幕上显示“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

从“React”导入React
从“./组件/布局”导入布局
从“./组件/SEO”导入SEO
const Results=props=>{
const Posts=[]
const Post=props=>{
返回{props.title}
}
const xhr=new XMLHttpRequest（）
xhr.onreadystatechange=函数（）{
log（“这在控制台中记录得很好”）
//是否在浏览器中显示值
//for（设i=0；i
Posts
应该是该组件状态的一部分。
调用
onreadystatechange
时，
Posts
不再是React正在监视以确定此组件是否重新呈现的对象。如果使用
setState
更新
Posts
（这应该是状态的一部分），则React将重新呈现

我会从
中阅读关于状态的文档，这是本地json文件吗？有没有理由不使用

gatsby transformer json？