在 React 中渲染一个列表，带有一些超时 usig setTimeout()

Question

我是新手，我试图使用 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 中，如果您想更改任何内容并希望它出现在屏幕上，唯一的方法就是渲染。

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

因此，干净的答案是您需要维护具有空值的状态。在组件挂载上，您可以拥有包含更改状态的超时逻辑。

Answer 2

问题 #1

目前，您正在尝试执行JavaScript代码，但将其放在JSX <div>元素中，该元素无法正常工作(它只会按原样呈现代码(。

这

function GetPosts() {
  return (
    <div>
    console.log('hey')
    </div>
  )
}

根本不会打印任何内容，它只会向用户显示console.log('hey')。但是，您可以通过将其放在大括号内来执行代码，如下所示：

function GetPosts() {
  return (
    <div>
    {"hello" + " world"}
    </div>
  )
}

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

问题#2

setTimeout 函数返回一个数字，用于标识正在进行的超时(并允许您在执行其函数之前清除它(，但它会立即返回此数字。延迟后显示数据比这更复杂。

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

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

这已经非常复杂了，你似乎是 JS 中的一个乞丐，所以我强烈建议你在深入研究像 React 这样复杂的框架之前阅读或学习更多的东西。希望我无论如何都能提供帮助并让自己清楚。

Answer 3

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

更改下面的代码，

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

对于这样的事情

class Getpost extends React.Component {
   constructor(props){
      super(props)
      this.setState = {
         hasFinishedLoading : false
      }
      this.setHasFinisedLoading = this.setHasFinisedLoading.bind(this)
   }
  setHasFinisedLoading(event){
     setTimeout(()=>{
        // tell the component that you have finished loading. It will reload the UI automatically
        this.setState({hasFinishedLoading : true});
     },2000)
  }
   render (){
      return(
                <div>
                  {this.state.hasFinishedLoading ? posts.postDet.map((post)=>{
                        return <li key={post.title}>{post.title}</li>;
                    }) : <p></p>
                  }
                </div>
            )  
   }                

Answer 4

你可以这样使用它

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

Answer 5

我认为这个自定义钩子对您更有帮助 https://github.com/streamich/react-use/blob/master/docs/useTimeout.md

您只需要安装react-use库

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