どのようにしてリストをリフレッシュするには、レスポンスレスキューフォームでポストを作成しましたか

Question

私は非常に反応して&還元し、https://github.com/rajaraodv/react-redux-blogを試してみました。私は何をしたい私の問題はPostsNewが成功した後PostsListをリフレッシュする方法です、私は一緒に新しいブログのポストを入れて、従うようPostsIndexにポスト一覧をブログにしたい

PostsIndex.js

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

です保存されました。

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