React基于api响应呈现Chart.js

Question

我正在使用reacts和chart.js,以及chart-js/react包装器.我动态地从API中提取数据,然后将图表基于返回的数据.问题是,只有API调用中的一个名称才会显示在图表中.应该有三个名字.

我认为问题在于,在GraphAPI返回所有数据之前渲染组件,因此图形只包含名字.至少这是我的想法.我尝试过使用该componentWillMount功能但无法使其正常工作.

任何人都可以发现下面我的代码有什么问题？

var App = React.createClass({

    getInitialState: function(){
        return {
            names: []
        }
    },

    componentDidMount: function() {
        $.get(url, function (data) {
            this.setState({ names: data })
        }.bind(this));
    },

    render: function() {
        return(
            <div>
                <Graph names={this.state.names}/>               
            </div>
        )
    }
});

var Graph = React.createClass({

    render: function() {
        for(var i = 0; i < this.props.names.length; i++) {
            names.push(this.props.names[i].name)
        }
        var chartData =  {
            labels: names,
            datasets: [{
                   data: goals
                },
                {
                    data: predictions
                }]
        };
        return <LineChart data={chartData} width="600" height="250"/>
    }
});

Answer 1

您必须控制您的状态,如下所示:

var App = React.createClass({
    getInitialState: function(){
        return {
            names: [],
            isLoaded: false
        }
    },
    componentDidMount: function() {
        $.get(url, function (data) {
            this.setState({ 
                names: data,
                isLoaded: true
            })
        }.bind(this));
    },
    render: function() {
        return(
            <div>
                {this.state.isLoaded ? <Graph names={this.state.names}/> : <div>Still Loading... </div> }
            </div>
        )
    }
});

因此,一旦获得所有数据,您可以渲染图表,否则显示加载屏幕.看一下这个链接可能会对你有所帮助.希望它对你有意义.