Question

我很反应和反应redux并尝试测试https://github.com/rajaraodv/react-redux-blog。我想做的是我想在PostsIndex中整理新博文和博客文章列表，如下所示，

PostsIndex.js

class PostsIndex extends Component {
  render() {
    return (
      <div>
        <HeaderContainer type="posts_index"/>
        <ValidateEmailAlertContainer/>
        <PostsNew />
        <PostsList />
      </div>
    );
  }
}

我的问题是如何在成功保存PostsNew后刷新PostsList。

Answer 1

您做出反应的方式是通过props，PostsIndex应保留帖子列表并将其传递给PostsList。 PostsNew可以作为道具接收回调，并在添加新帖子时调用它。像这样：

  class PostsIndex extends Component {
        constructor() {
            this.state = { posts: [] };
            this.postAdded = this.postAdded.bind(this);
        }

        postAdded(newPost) {
            let { posts } = this.state;
            posts.push(newPost);
            //This will trigger a rerender and the PostList will 
            //receive the new posts list.
            this.setState({posts: posts});
        }

        render() {
            let { posts } = this.state;
            return (
            <div>
                <HeaderContainer type="posts_index"/>
                <ValidateEmailAlertContainer/>
                {/* Inside the PostsNew component you should call this.props.onSave */}
                <PostsNew onSave={this.postAdded}/>
                {/* Here you pass along the list of posts */}
                <PostsList posts={posts}/>
            </div>
            );
        }
    }

如何在react redux表单中成功创建post后刷新列表

1 个答案: