我一直在尝试进行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!!') }); } })
您的组件名称必须以大写字母开头,因为以小写字母开头的组件会被搜索为默认DOM元素,例如div, p, span etc。对于您的statisticsPage组件,情况并非如此。将其设置为大写即可。
div, p, span etc
statisticsPage
根据文档:
当元素类型以lowercase字母开头时,它指的是诸如或的内置组件,并导致将字符串'div' 或“ span”传递给React.createElement。以大写字母开头的类型,例如,<Foo />编译React.createElement(Foo)并对应于JavaScript文件中定义或导入的组件。 我们建议使用大写字母命名组件。如果确实有一个以lowercase字母开头的组件,请在JSX中使用它之前将其分配给大写变量。
当元素类型以lowercase字母开头时,它指的是诸如或的内置组件,并导致将字符串'div' 或“ span”传递给React.createElement。以大写字母开头的类型,例如,<Foo />编译React.createElement(Foo)并对应于JavaScript文件中定义或导入的组件。
lowercase
'div'
React.createElement
<Foo />
React.createElement(Foo)
JavaScript
我们建议使用大写字母命名组件。如果确实有一个以lowercase字母开头的组件,请在JSX中使用它之前将其分配给大写变量。
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="https://cdnjs.cloudflare.com/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>