反應js重新加載或強制重新渲染組件以反映后端的更改

Question

我有一個應用程序，可以從api中提取文章，並在三個表格中顯示它們。 這些表包含喜歡，不喜歡和不評論或未評論的文章。 未審閱的表包含“喜歡”和“不喜歡”按鈕。 當用戶單擊喜歡或不喜歡時，我使用axios向服務器發出發布請求。 這成功地更改了數據庫，但是我沒有找到一種無需手動重新加載應用程序即可顯示前端更改的方法。 this.forceUpdate不起作用。 有沒有一種方法可以重新加載組件，以便它發出這些請求並呈現更改，或者有另一種方法可以解決此問題。

注意。 使用3 get請求而不是1從api中提取三組文章。

編輯：

文章模塊

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模塊

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

Answer 1

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

Answer 2

沒有您的代碼，這就是最好的方法。

首先，有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函數。