反應js重新加載或強制重組的組件，以反映後端的變化

我有一個應用程序，從api中拉出文章，並在三個表中顯示它們。這些表格包含喜歡的，不喜歡的和未註釋的或未評論的文章。未經審查的表格包含喜歡和不喜歡的按鈕。當用戶點擊喜歡或不喜歡我使用axios向服務器發出發佈請求。這成功地更改了數據庫，但是我找不到手動重新加載應用程序的前端顯示更改的方法。 this.forceUpdate不起作用。有沒有辦法重新加載組件，以便它使這些請求和呈現更改或有另一種方法來解決這個問題。反應js重新加載或強制重組的組件，以反映後端的變化

注意。

文章模塊

var Articles = React.createClass({ 
    getInitialState: function() { 
     return { 
      unReviewed: null, 
      liked: null, 
      disliked: null 
     }; 
    }, 
    componentWillMount: function() { 
     this.getArticles(); 
    }, 
    getArtiles: function() { 
     //3 api call here and set the response to unReviewed, liked and disliked 
    }, 
    handleReview: function() { 
     this.forceUpdate(); 
    }, 
    render: function() { 
     var {unReviewed, liked, disliked} = this.state; 
     if (//all three state are null) { 
      return(<div>Loading...</div>); 
     } else { 
      return(
      <div> 
       <h1>Articles</h1> 
       <h2>New/Unreviewed</h2> 
       <ArticleTable articles={unReviewed} onReview={this.handleReview}/> 
       <h2>liked</h2> 
       <ArticleTable articles={liked}/> 
       <h2>disliked</h2> 
       <ArticleTable articles={disliked}/> 
      </div> 
      ); 
     } 
    } 
});

ArticlesTable模塊

var ArticleTable = React.createClass({ 
    handleReview: function() { 
     this.props.onReview(); 
    }, 
    render: function() { 
     var {articles} = this.props; 
     var renderData =() => { 
      return articles.map((article) => { 
       return (
        <ArticleItem key={article.id} {...article} onReview={this.handleReview}/> 
       ); 
      }); 
     }; 

     return(
      <table> 
       <thead>//headers 
       </thead> 
       <tbody>{renderData()}</tbody> 
      </table> 
     ); 
    } 
});

ArticleItem模塊

：三組文章從API使用3 GET請求，而不是1

編輯拉

var ArticleItem = React.createClass({ 
    propTypes: { 
     //validating props 
    }, 

    onReview: function (id) { 
     //making post api call 
     that.props.onReview(); 
    }, 

    render: function() { 
     var {id, text, author, date, liked} = this.props; 
     var that = this; 
     if(liked == null){ 
      liked = "--"; 
     } 
     var review = function() { 
      if(liked == "--") { 
       return(<span> 
        <button onClick={() => that.onReview(id)}>Like</button> 
       </span>); 
      } 
      return null; 
     }; 

     return (
      <tr> 
       <td>{id}</td> 
       //other parts of article 
       <td>{review()}</td> 
      </tr> 
     ); 
    } 
});

來源

2017-01-03 Ragas

分享您的代碼。如果你保持更新組件的狀態，它會自動渲染。但分享你的代碼，我們將能夠幫助你。 –

沒有一些代碼就很難理解。你的組件如何使用這些文章？一般來說，如果它通過道具傳遞，您將需要更改道具，如果狀態您將不得不使用setState與新值。 forceUpdate僅在數據正確時才起作用。 – Kinnza

要重新渲染，必須對組件狀態進行更改。因此，您必須從後端獲取響應，並對組件狀態進行更改。

來源

2017-01-03 13:52:16

沒有你的代碼，這是說最好的方法是什麼。

首先，有forceUpdate這迫使render函數再次運行。但我假設你實際上需要再次調用API。那麼像這樣的事情呢？

class MyComponent extends React.Component { 
    constructor() { 
     super(); 

     this.state = { 
      intervalId: null 
     } 
    } 

    componentWillMount() { 
     const id = setInterval(this.fetchData, 5000); 
     this.setState({intervalId: id}); 
    } 

    componentWillUnmount() { 
     clearInterval(this.state.intervalId); 
    } 

    fetchData() { 
     // Call your api 
    } 

    render() { 
     .. 
    } 
}

這將每5秒呼叫fetchData。當數據被提取時，如果你更新狀態，那麼render函數將被重新加載。

來源

2017-01-03 17:15:55 Kousha

每5秒調用一次api是我想避免的。因爲這個應用程序將用於小型辦公室和數據庫將每天最多更新十幾次。所以每5秒製造一次api就是過度殺傷 – Ragas

反應js重新加載或強制重組的組件，以反映後端的變化

回答

相關問題