陣營的js SETSTATE使用陣營路由器

我有2個陣營類：陣營的js SETSTATE使用陣營路由器

const PostList = React.createClass({ 
    getInitialState: function() { 
     return { 
      status: "loading", 
      posts: [] 
     } 
    }, 
    render: function() { 
     return (
     <div id="container"> 
      <ReactRouter.Link to="upload"></ReactRouter.Link> 
      <a href="#/upload">{this.state.status}</a> 
       { 
        this.state.posts.map(function (post) { 
         return (
          <Post post={post} /> 
         ); 
        }) 
       } 
      </div> 
     ); 
    } 
}); 

const Upload = React.createClass({ 
    render: function() { 
     return (
      <div className="upload">Upload</div> 
     ); 
    } 
}) 

const MainContent = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <Header /> 
       <div id="inner-content"> 
        {this.props.children} 
       </div> 
       <Footer /> 
      </div> 
     ); 
    } 
}) 

const routes = (
    <Route path="/" component={MainContent}> 
     <ReactRouter.IndexRoute component={PostList} /> 
     <Route path="upload" component={Upload} /> 
    </Route> 
) 

var render = ReactDOM.render(<Router history={History}>{routes}</Router>, document.getElementById("content"));

的問題是，我怎麼能訪問PostList的功能的setState呈現新的職位？

帖子將通過socket.io conenction被刷新，所以當一個新的職位到達時，我只是想設置PostList的狀態重新呈現完整的HTML代碼與他的新博文

對不起壞英語...

來源

2016-09-24 MSzucs

添加componentDidMount功能，並建立了一個套接字監聽裏面，這樣當新郵件到達時，將其添加到帖子

const PostList = React.createClass({ 
    getInitialState: function() { 
     return { 
      status: "loading", 
      posts: [] 
     } 
    }, 
    componentDidMount: function() { 
     var that = this; 
     // Be sure to set up data fetching code here 

     // Set up listener for posts updates here 
     socket.on('update', function (data) { 
      // Assuming data contains the post content 
      that.setState({ 
       posts: that.state.posts.concat(data) 
      }); 
     }); 
    }, 
    render: function() { 
     return (
     <div id="container"> 
      <ReactRouter.Link to="upload"></ReactRouter.Link> 
      <a href="#/upload">{this.state.status}</a> 
       { 
        this.state.posts.map(function (post) { 
         return (
          <Post post={post} /> 
         ); 
        }) 
       } 
      </div> 
     ); 
    } 
});

來源

2016-09-24 11:46:57

它現在的工作的當前列表，謝謝！但是當我導航到上傳並返回到主頁面（不刷新）（顯示帖子列表）爲什麼該列表不能識別我的帖子？所以當我導航沒有刷新頁面的帖子是空的再次... 我做錯了什麼？ – MSzucs

如果它幫助你，接受我的答案？（：因爲當你從那個頁面離開時，組件被卸載，那麼呈現的DOM元素將被移除並替換爲你的上傳頁面，當你返回頁面時，將不會有數據。在'componentDidMount（）'開始實現一個數據獲取調用來獲取已有的數據，'socket.on（'update'）'方法只會告訴你的組件有新的帖子;它不會獲取現有的帖子。 –

@MSzucs我已經更新了我的答案，告訴你在哪裏設置數據獲取代碼。 –

陣營的js SETSTATE使用陣營路由器

回答

相關問題