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

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

注意，POST和LIKE在服务器端正确更新，状态正确更新以反映这些更改，但状态和UI不同步，因为它们应该在CreatePostForm组件中执行

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

class PostsPage扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
员额：[]，
用户：this.props.auth.user，
地点：“主要”
};
this.loadPosts=this.loadPosts.bind（this）；
这是loadPosts（）；
};
装货柱（）{
this.props.loadPostsRequest（this.state）。然后(
（结果）=>{
日志（results.data.posts）；
这是我的国家({
帖子：results.data.posts
});
});
}
render（）{
const{createPostRequest}=this.props；
const posts=this.state.posts.map（（post，i）=>
);
返回(
{posts}
);
}
}

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

导出类CreatePostForm扩展React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 后体：“， 用户：this.props.auth.user }; this.onSubmit=this.onSubmit.bind（this）； this.onChange=this.onChange.bind（this）； } onChange（e）{ 这是我的国家({ [e.target.name]：e.target.value }); } 提交（e）{ e、 预防默认值（）； this.props.createPostRequest（this.state）。然后( () => { this.props.loadPosts（）； }) } render（）{ 返回( ); } }

---

不要将

索引

用于帖子地图中的

键

。当新帖子出现时，新帖子的

键与前一篇帖子的
键相同，因此React将其视为相同的元素。假设每个帖子的
postId
都是唯一的，请使用它

请发布一个答案，然后提供参考。你完全正确@azium，这就成功了：）我觉得这是件小事，谢谢@Sachith什么？我不理解你的评论。@Sachith这是react的官方文件，只要react:）@Sachith我已经发布了答案，链接只是我不需要包含的附加信息。你读了我的段落了吗？