Javascript 基于api响应的React render Chart.js

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

我认为问题在于，

Graph

组件的呈现是在API返回所有数据之前进行的，因此该图只包含第一个名称。至少我是这么想的。我已尝试使用

组件willmount

函数，但无法使其正常工作

有人能发现我下面的代码有什么错误吗

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"/>
    }
});

var-App=React.createClass({
getInitialState:函数（）{
返回{
姓名：[]
}
},
componentDidMount:function（）{
$.get（url、函数（数据）{
this.setState（{names:data}）
}.约束（这个）；
},
render:function（）{
返回(
)
}
});
var Graph=React.createClass({
render:function（）{
for（var i=0；i

您必须控制您的状态，如下所示：

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>
        )
    }
});

var-App=React.createClass({
getInitialState:函数（）{
返回{
姓名：[]，
isLoaded:false
}
},
componentDidMount:function（）{
$.get（url、函数（数据）{
这个.setState（{
名称：数据，
isLoaded：正确
})
}.约束（这个）；
},
render:function（）{
返回(
{this.state.isLoaded？：仍在加载…}
)
}
});

---

因此，一旦获得所有数据，就可以渲染图表，否则将显示加载屏幕。看看这个，可能对你有帮助。希望这对你有意义。

你必须控制自己的状态，如下所示：

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>
        )
    }
});

var-App=React.createClass({
getInitialState:函数（）{
返回{
姓名：[]，
isLoaded:false
}
},
componentDidMount:function（）{
$.get（url、函数（数据）{
这个.setState（{
名称：数据，
isLoaded：正确
})
}.约束（这个）；
},
render:function（）{
返回(
{this.state.isLoaded？：仍在加载…}
)
}
});

---

因此，一旦获得所有数据，就可以渲染图表，否则将显示加载屏幕。看看这个，可能对你有帮助。希望它对您有意义。

现在的问题是图形渲染了两次。@phantom没关系。-一次是在您启动状态时，一次是在您使用this.setState时，是的，但我不希望它在每个渲染上创建一个新的图形，而是只创建它once@phantom因此，您可能必须查看

shouldComponentUpdate

方法。如果它在初始状态下被调用，您可以处理它，我在这里创建了一个问题，以防其他人遇到相同的问题，现在的问题是图形被渲染两次。@phantom没关系。-一次是在您启动状态时，一次是在您使用this.setState时，是的，但我不希望它在每个渲染上创建一个新的图形，而是只创建它once@phantom因此，您可能必须查看

shouldComponentUpdate

方法。如果它在初始状态被调用，您可以处理它，那么我在这里创建了一个问题，以防其他人遇到相同的问题