更新状态未在UI中正确反映

我正在开发一个应用程序,允许用户在页面上发布和喜欢的消息。应用程序将帖子从最新到最旧排序。我遇到的问题是,例如,如果页面上有十个帖子,最上面的一个帖子是喜欢的,然后创建了一个新帖子-新帖子被添加到页面顶部,前一个最上面的帖子中的喜欢会转移到新帖子(默认情况下应该没有喜欢)-错误地在页面上呈现喜欢。

注意,帖子和赞在服务器端正确更新,状态正确更新以反映这些更改,但状态和UI不同步,因为它们应该在执行 onSubmit() 方法。

PostsPage.js

class PostsPage extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            posts: [],
            user: this.props.auth.user,
            location: "main"
        };

        this.loadPosts = this.loadPosts.bind(this);
        this.loadPosts();
    };


    loadPosts() {

        this.props.loadPostsRequest(this.state).then(
            (results) => {
                console.log(results.data.posts);
                this.setState({
                    posts: results.data.posts
                });
            });
    }



    render() {
        const { createPostRequest } = this.props;

        const posts = this.state.posts.map( (post, i) =>
            <Post     
                loadPostsRequest={loadPostsRequest}
                key={i}
                postId={post.postId}
                userId={this.state.user.userId}
                content={post.postBody}
            />
        );

        return (
            <div className="container-fluid" id="posts-container">
                <div className="row">
                    <div className="col-md-4 col-md-offset-4 posts-wrapper">

                        <div id="create-post-form">
                            <CreatePostForm
                                createPostRequest={createPostRequest}
                                history={this.props.history}
                                loadPosts={this.loadPosts}
                            />
                        </div>
                        { posts }
                    </div>
                </div>
            </div>
        );
    }
}

CreatePostForm.js

export class CreatePostForm extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            postBody : "",
            user: this.props.auth.user
        };

        this.onSubmit = this.onSubmit.bind(this);
        this.onChange = this.onChange.bind(this);
    }

    onChange(e) {
        this.setState({
            [e.target.name] : e.target.value
        });
    }

    onSubmit(e) {
        e.preventDefault();

        this.props.createPostRequest(this.state).then(
            () => {
                this.props.loadPosts();
            })
    }

    render() {

        return (
            <div className="create-post-inner col-md-12">
                <form id="createPost" onSubmit={ this.onSubmit } >
                    <textarea value={this.state.postBody} className="form-control postInput" name="postBody" onChange={ this.onChange } placeholder="Write something on this page..." >
                    </textarea>
                    <input type="submit" className="submit btn btn-primary" />
                </form>
            </div>
        );
    }
}