javascript - 更新状态未在 UI 中正确反射(reflect)

Question

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

请注意，帖子和点赞会在服务器端正确更新，状态也会正确更新以反射(reflect)这些更改，但状态和 UI 不同步，因为它们应该在 onSubmit 执行后同步() CreatePostForm 组件中的方法。

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

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

Answer 1

不要在你的 posts 映射中使用 index 作为 key。当新帖子出现时，新帖子与上一篇帖子具有相同的 key，因此 React 将其视为相同的元素。假设 postId 对于每个帖子都是唯一的，请改用它。

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