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函数。

反应js重新加载或强制重新呈现组件以反映后端的变化

2 个答案: