如何将react元素添加到动态生成元素的状态数组中

Question

这是文件。好的问题是，当我从推送器得到响应时，我想制作一个Post元素，然后将其插入#posts div的顶部。但我不知道怎么做。感谢所有帮助的人

import React from 'react';
import $ from 'jquery';
import {browserHistory} from 'react-router';


import Nav from  '../Stateless/Home/Nav';
import Post from  '../Stateless/Home/Post';
import CreatePostForm  from  '../Stateful/CreatePostForm'

class HomePage extends React.Component {
    constructor() {
        super();
        this.handleLogout = this.handleLogout.bind(this);
        this.componentWillMount = this.componentWillMount.bind(this);
        this.componentDidMount = this.componentDidMount.bind(this);
        this.state = {posts: []};
        this.columnStyle = {marginTop: '20px'};
    }

    handleLogout(event) {
        event.preventDefault();
        localStorage.removeItem('user');
        $.ajax({
            url: '/api/logout',
        }).done(() =>  {
            browserHistory.push('/');
        });
    }

    componentWillMount() {

        $.ajax({
            type: 'GET',
            url: '/api/getPosts/'
        })
        .done((data) =>  {
            this.setState({posts: data});
        })
        .fail((error) =>{
           console.log(error);
        });

    }

    componentDidMount() {
        $('.ui.dropdown').dropdown();
        $('.createPost .image').dimmer({
            on: 'hover'
        });
        var self = this;
        Pusher.logToConsole = true;
        var pusher = new Pusher('8a903e0a2e71cd48b716', {
            cluster: 'eu',
            encrypted: true
        });

        var channel = pusher.subscribe('tickr-home');
        channel.bind('newPost', function(data) {
            console.log(data);
            // $('#posts').prepend(<Post key={data.id} username={data.user.username}
            //                           avatarPath="http://icons.iconarchive.com/icons/femfoyou/angry-birds/1024/angry-bird-icon.png"
            //                           imagePath={data.imagePath}
            //                           description={data.description}/>);
            console.log(self.state.posts);
            let shit = this.state.posts;
            shit.unshift(data);
            self.setState({posts: shit });
            console.log(self.state.posts);
        });
    }

    render() {
        let posts = this.state.posts.map(post => {
            return <Post key={post.id} username={post.user.username} avatarPath="http://icons.iconarchive.com/icons/femfoyou/angry-birds/1024/angry-bird-icon.png" imagePath={post.imagePath} description={post.description} />
        });
        return (
            <div>
                <Nav name="Tickr" handleLogout={this.handleLogout} />
                <div className="ui container holder grid stackable doubling" style={this.columnStyle}>
                    <div className="eight wide column centered" id="posts"> {/*centered*/}
                        {(() => {
                            if(localStorage.getItem('user')) {
                                return (
                                    <CreatePostForm username={JSON.parse(localStorage.getItem('user')).username} />
                                )
                            }
                        })()}
                        {posts}
                    </div>
                </div>
            </div>
        )
    }
}


export default HomePage;