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

Question

我对 React 和 redux 还很陌生，并试图测试 https://github.com/rajaraodv/react-redux-blog。我想做的是将新博客 Post 和博客 Post 列表放在 PostsIndex 中，如下所示，

PostsIndex.js

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

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

Answer 1

你在 React 中的做法是通过 props，PostsIndex 应该保存 post 的列表并将其传递给 PostsList。 PostsNew 可以接收回调作为道具，并在添加新的 post 时调用它。像这样：

  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 后刷新列表

How to refresh list after successfully created post in react redux form

javascript

reactjs

redux

redux-form