Question

我正在开发一个允许用户在页面上发布和喜欢消息的应用程序。该应用程序将帖子从最新到最旧命令。我正在运行的问题是，如果例如页面上有十个帖子并且顶部的帖子是喜欢的，则会创建一个新帖子 - 新帖子将添加到页面顶部，而来自上一个最顶层的帖子会转到新帖子（默认情况下应该为0） - 错误地在页面上呈现相似内容。

注意，帖子和喜欢在服务器端正确更新，状态正确更新以反映这些更改，但状态和UI不同步，因为它们应该在执行{{ CreatePostForm组件中的1}}方法。

有没有其他人遇到过类似的问题？我很感激有关如何解决的任何建议。

PostsPage.js

onSubmit()

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

Answer 1

请勿在帖子地图中使用index获取key。当新帖子显示时，新帖子与前一篇文章具有相同的key，因此React将其视为同一元素。假设postId对每个帖子都是唯一的，请改用它。

https://facebook.github.io/react/docs/lists-and-keys.html

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

1 个答案: