React – 在AJAX之后添加组件来查看

我一直在试图做一个AJAX调用，然后将其添加到我的视图后，已被检索。

目前的代码没有真正发生。

const View = () => ( <div> <h1>Reports</h1> <statisticsPage /> </div> ); export default View; var statisticsPage = React.createClass({ getInitialState: function() { return {info: "loading ... "}; }, componentDidMount: function() { this.requestStatistics(1); }, render: function() { return ( <div>info: {this.state.info}</div> ); }, requestStatistics:function(){ axios.get('api/2/statistics') .then(res => { values = res['data'] this.setState({info:1}) console.log('works!!') }); } }) 

Answer 1

您的组件名称必须以大写字母开头，因为以小写字母开头的内容将被search为默认DOM元素（如div, p, span etc 。 你的statisticsPage组件不是这种情况。 大写，它工作正常。

 const View = () => ( <div> <h1>Reports</h1> <StatisticsPage /> </div> ); var StatisticsPage = React.createClass({ getInitialState: function() { return {info: "loading ... "}; }, componentDidMount: function() { this.requestStatistics(); }, render: function() { return ( <div>info: {this.state.info}</div> ); }, requestStatistics:function(){ console.log('here'); this.setState({info:1}) console.log('works!!') } }) ReactDOM.render(<View/>, document.getElementById('app')); 

 <script src="ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>