Javascript 函数不返回组件

我一直在努力寻找一种方法，每次点击按钮都会在屏幕上添加一个新的postkind。我是新手，知道的不多。该函数在console.log中运行，但不返回Post组件

export default class Extra extends React.Component {

    constructor() {
        super();
        this.state = {
            val :'',
            posts: []
        }
    }

    handlePost = () => {
        const newPost = <Post status = "Status" about = "This post is about React"></Post>;
        this.state.posts.push(newPost);
        console.log(this.state.posts.length);
        return (this.state.posts[this.state.posts[this.state.posts.length-1]]);
    }

    render() {
        return(
            <div>

                <button onClick = {this.handlePost}className = "fixed">Post</button>
            </div>
        );
    }
}

const Post = ({ status, about }) => {
    return(
        <div className = "UI">
            <h2>{status}</h2><hr/><br/>
            <p>{about}</p>
        </div>
    );
}
export default Post;

---

你的代码有很多错误。首先，你不应该使用this.state来改变state。你应该使用this.SetState。你能指定where handle post method吗？你的意思是这样的，this.SetState{posts:this.state.posts.pushnewPost}你又在改变旧的状态了。这是错误的。请看我的回答谢谢Arora，你能告诉我这3个点在handlePost函数中的意思吗？这是一个扩展运算符请看mdn的更多内容

export default class Extra extends React.Component {

    constructor() {
        super();
        this.state = {
            val :'',
            posts: []
        }
    }

    handlePost = () => {
        const newPost = <Post status = "Status" about = "This post is about React"></Post>;
        this.setState({posts:[...this.state.posts,newPost]});
        console.log(this.state.posts.length);
    }

    render() {
        return(
            <div>

                <button onClick = {this.handlePost}className = "fixed">Post</button>
            </div>
        );
    }
}

const Post = ({ status, about }) => {
    return(
        <div className = "UI">
            <h2>{status}</h2><hr/><br/>
            <p>{about}</p>
        </div>
    );
}
export default Post;