我正在使用 reacts 和 chart.js，以及 chart-js/react 包装器。我从 API 动态提取数据，然后根据返回的数据绘制图表。问题在于图中显示的只是来自 API 调用的一个名称。应该是三个名字。

我认为问题是Graph在 API 返回所有数据之前渲染组件的渲染，所以图形只包含第一个名称。至少这是我的想法。我曾尝试使用该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"/>
    }
});