Javascript 使用setTimeout（）在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>
            </>
        )
    }

render（）{
警察哨所=[
{标题：“第一篇文章”，正文：“这是第一篇文章”}，
{标题：“第二站”，正文：“这是第二站”}
]
返回(
{this.state.message}
改变


)
}

导出函数Getpost（posts）{
//此.setTimeout（（）=>{
//返回(
//log（“等待列表填充”）
返回(
设置超时（（）=>{
posts.postDet.map（（post）=>{
return
{post.title}
；
})
},2000)
)       
}

有谁能帮我找出哪里错了，或者我怎样才能完成我的任务

目前，您正试图执行JavaScript代码，但将其放入JSX

元素中，该元素无法工作（它只会按原样呈现代码）

这个

如果要包含动态数据，可以从花括号内调用函数

问题#2

setTimeout

函数返回一个标识当前超时的数字（并允许您在执行其函数之前清除该数字），但它会立即返回该数字。延迟后显示数据比这更复杂

例如，您可以使用react挂钩，这已经是一个非常高级的主题。下面是它的外观：

function GetPosts(props) {
  // Create a local state for your posts (and initialize it with an empty array)
  const [posts, setPosts] = useState([]);

  // Execute setTimeout *only* when the component is created (once)
  useEffect(() => {
    const timeoutID = setTimeout(() => setPosts(props.postDet), 2000);

    // You can optionally (but it's extremely recommended) return another function that will be invoked when the component is unmounted/deleted
    return (() => clearTimout(timeoutID));
  }, []);

  return (
    <div>
      {posts.map((post)=>{
         return <li key={post.title}>{post.title}</li>;
      })}
    </div>
  )
}

函数GetPosts（道具）{
//为帖子创建本地状态（并用空数组初始化）
const[posts，setPosts]=useState（[]）；
//创建组件时执行setTimeout*仅限*（一次）
useffect（（）=>{
const timeoutID=setTimeout（（）=>setPosts（props.postDet），2000年）；
//您可以选择（但非常推荐）返回另一个函数，该函数将在卸载/删除组件时调用
返回（（）=>clearTimout（timeoutID））；
}, []);
返回(
{posts.map（（post）=>{
return
{post.title}
；
})}
)
}

这已经非常复杂了，而且你似乎是JS的乞丐，所以我强烈建议你在深入研究React这样复杂的框架之前，多阅读或学习一些内容。希望我能帮助你，让自己明白。

问题1

目前，您正试图执行JavaScript代码，但将其放入JSX

元素中，该元素无法工作（它只会按原样呈现代码）

这个

如果要包含动态数据，可以从花括号内调用函数

问题#2

setTimeout

函数返回一个标识当前超时的数字（并允许您在执行其函数之前清除该数字），但它会立即返回该数字。延迟后显示数据比这更复杂

例如，您可以使用react挂钩，这已经是一个非常高级的主题。下面是它的外观：

function GetPosts(props) {
  // Create a local state for your posts (and initialize it with an empty array)
  const [posts, setPosts] = useState([]);

  // Execute setTimeout *only* when the component is created (once)
  useEffect(() => {
    const timeoutID = setTimeout(() => setPosts(props.postDet), 2000);

    // You can optionally (but it's extremely recommended) return another function that will be invoked when the component is unmounted/deleted
    return (() => clearTimout(timeoutID));
  }, []);

  return (
    <div>
      {posts.map((post)=>{
         return <li key={post.title}>{post.title}</li>;
      })}
    </div>
  )
}

函数GetPosts（道具）{
//为帖子创建本地状态（并用空数组初始化）
const[posts，setPosts]=useState（[]）；
//创建组件时执行setTimeout*仅限*（一次）
useffect（（）=>{
const timeoutID=setTimeout（（）=>setPosts（props.postDet），2000年）；
//您可以选择（但非常推荐）返回另一个函数，该函数将在卸载/删除组件时调用
返回（（）=>clearTimout（timeoutID））；
}, []);
返回(
{posts.map（（post）=>{
return
{post.title}
；
})}
)
}

---

这已经非常复杂，而且你在JS中似乎是一个乞丐，所以我强烈建议你在进入像React这样复杂的框架之前多阅读或学习一点。希望我能帮助你，让自己明白。

如果你对React中的钩子有更多了解，这会更好。但我想你不会。所以我给你一些建议下面是一个更简单的修正

更改下面的代码

导出函数Getpost（posts）{
//此.setTimeout（（）=>{
//返回(
//log（“等待列表填充”）
返回(
设置超时（（）=>{
posts.postDet.map（（post）=>{
return
{post.title}
；
})
},2000)
)       
}

像这样的事情

类Getpost扩展了React.Component{ 建造师（道具）{ 超级（道具） this.setState={ hasFinishedLoading:错误 } this.setHasFinisedLoading=this.setHasFinisedLoading.bind（this） } SetHasFinishedLoading（事件）{ 设置超时（（）=>{ //告诉组件您已完成加载。它将自动重新加载UI this.setState（{hasFinishedLoading:true}）； },2000) } 渲染（）{ 返回( {this.state.hasFinishedLoading？posts.postDet.map（（post）=>{ return

{post.title}

； })：

} ) }

---

如果您对React中的钩子有更多了解，这会更好。但我假设您没有。因此，我在下面给您一个更简单的更正

更改下面的代码

导出函数Getpost（posts）{
//这是塞蒂姆
function GetPosts() {
  return (
    <div>
    {"hello" + " world"}
    </div>
  )
}

function GetPosts(props) {
  // Create a local state for your posts (and initialize it with an empty array)
  const [posts, setPosts] = useState([]);

  // Execute setTimeout *only* when the component is created (once)
  useEffect(() => {
    const timeoutID = setTimeout(() => setPosts(props.postDet), 2000);

    // You can optionally (but it's extremely recommended) return another function that will be invoked when the component is unmounted/deleted
    return (() => clearTimout(timeoutID));
  }, []);

  return (
    <div>
      {posts.map((post)=>{
         return <li key={post.title}>{post.title}</li>;
      })}
    </div>
  )
}

import useTimeout from 'react-use/lib/useTimeout';

const PostList = (props) =>{
    const ms = props.ms || 5000;
    const [isReady, cancel] = useTimeout(ms);

    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>
              {isReady && <Getpost postDet={posts} />}
            </ul>
        </div>
        </>
    )
}

constructor(props){
        super(props)
        this.state = {
            posts: []
        }
    }
    componentDidMount(){
        const posts = [
            { title: "Post One", body: "This is post one" },
            { title: "Post Two", body: "This is post two" }
        ]

        setTimeout(() => {
            this.setState({ posts: posts })
        }, 2000)
    }

    render(){

        return (
            <>
                <div className={"container"}>
                    <h2>{this.state.message}</h2>
                    <button className="primary" onClick={this.handleChange}>Change</button>
                    <ul>
                        <Getpost postDet={this.state.posts} />
                    </ul>
                </div>
            </>
        )
    }




    export function Getpost(posts) {

        return (
            <div>
                posts.postDet&& posts.postDet.length && posts.postDet.map((post)=>{
                            return <li key={post.title}>{post.title}</li>;
            })
                    </div>
        )
    }