javascript - 根据 api 响应 react 渲染 Chart.js

Question

我正在使用 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"/>
    }
});

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

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