react js reload or force rerender of a component to reflect change in back end

Question

I have an app that pulls articles from an api and shows them in three tables. These table contain liked, disliked and uncommented or unreviewed articles. The unreviewed table contains like and dislike buttons. When the user clicks like or dislike i make a post request to the server using axios. This succesfully changes the database but i could not find a way to show the change in front end without manually reloading the app. this.forceUpdate does not work. Is there a way to reload the component so it makes those request and and render the change or is there another way to solve this.

Note. the three group of articles are pulled from the api using 3 get request not 1.

Edit:

Articles module

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 module

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 module

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

Without your code, it is say what the best approach is.

First off, there is forceUpdate which forces the render function to run again. But I'm assuming you actually need the API to be called again. So how about something like this?

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() {
        ..
    }
}

This will call fetchData every 5 seconds. When data is fetched, if you update the state, then the render function will be reloaded.