javascript - 使用 setTimeout() 在 React 中渲染一个带有超时的列表

Question

我是 React 的新手，我试图使用 json 数组显示帖子列表，并希望列表在特定秒数的超时后呈现，但列表未使用超时函数呈现。

render(){
        const posts=[
            { title:"Post One", body:"This is post one"},
            { title:"Post Two", body:"This is post two"}
        ]
        return(
            <>
            <div className={"container"}>
                <h2>{this.state.message}</h2>
                <button className="primary" onClick={this.handleChange}>Change</button>
                <ul>
                <Getpost postDet={posts} />
                </ul>
            </div>
            </>
        )
    }

export function Getpost(posts){
   // this.setTimeout(()=>{
        //return(

            //console.log("waiting for list to populate")
            return(
                <div>
                setTimeout(()=>{
                    posts.postDet.map((post)=>{
                        return <li key={post.title}>{post.title}</li>;
                    })
                },2000)
                </div>
            )       
            }

任何人都可以帮我解决我的错误或者我怎样才能完成我的任务

Answer 1

在 React 中，如果您想更改任何内容并希望它显示在屏幕上，唯一的方法就是渲染。

渲染的唯一方法是改变状态。

因此，简单的答案是您需要维护一个具有空值的状态。在 componentdidmount 上，您可以拥有更改状态的超时逻辑。