Question

我有一个SPA，允许用户根据数据上传数据和查看计算。

我使用每2秒轮询一次的父组件，通过AJAX获取数据列表中的每个项目。我遍历列表中的每个项目，这些项目调用子反应组件，该组件进行昂贵的API调用以检索计算并将其显示在表格中。

这是子组件的代码：

var DisplayRow = React.createClass({

    getInitialState: function(){
        return (
            {data: [] }
            );

    },

    componentDidMount: function(){
        this.loadData()
    },

    loadData: function(){
        $.ajax({
                url: "http://127.0.0.1:8000/api/tables/" + this.props.columns + "/stats/",
                dataType: 'json',
                cache: false,
                success: function(data){
                    this.setState({data: data});
                    console.log("mounted");

                }.bind(this),
                error: function(xhr, status, err) {
                    console.error(this.props.url, status, err.toString());
                }.bind(this)
            });
    },

/*
    shouldComponentUpdate: function(nextProps, nextState){
        console.log(nextProps.columns)
        console.log(this.props.columns)
        return nextProps.columns !== this.props.columns;
    },
    */

    render: function(){


        var rows = this.state.data.map(function(item){
        var titles = []
        var vals = []
        for(var key in item){
            if (item.hasOwnProperty(key)){
                titles.push(key)
                vals.push(item[key])
                }
        }
        return (
            <table className="table-hover table-bordered">
            <tbody>
            <DisplayStuff stuff={titles} />
            <DisplayStuff stuff={vals} />
            </tbody>
            </table>
            );

        });


        return (
            <div className="yep">

            <h2> {this.props.name} </h2>
                {rows}
            </div>
            );

设计它的好方法是什么，所以列表上的轮询很好，但昂贵的API调用只发生一次（除非初始列表被更改，例如添加了更多数据）？

我玩了shouldComponentUpdate，但是在渲染发生之前我调用了API，所以仍然进行了调用，并且如果我在初始数据加载后刷新页面，那么表格也不会被渲染。

Answer 1

您可以在父组件中调用和缓存昂贵的API调用。然后只需将数据作为props

传递给DisplayRow

Reactjs使用昂贵的API调用进行设计

1 个答案: