Question

我一直在尝试进行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

组件名称必须以大写字符开头，因为以小写字母开头的那些字符将被搜索为默认DOM元素，如div, p, span etc。对于您的statisticsPage组件，情况并非如此。把它做成大写，它工作正常。

根据docs：

当元素类型以lowercase字母开头时，它指的是a   内置组件like或者得到字符串'div'   或'span'传递给React.createElement。以a开头的类型   大写字母如<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>

React - 用户定义的JSX组件不呈现

1 个答案: