反应axios.get不工作，据说编译失败

Question

我是新来的。我正在尝试使用axios获取api数据。但这是一个错误。我的代码是：

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import ApiContent from './ApiContent';

class App extends React.Component{
    axios.get('http://example.com/api/api/topCardNews')
      .then(function (response) {
        // handle success
        console.log(response);
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
      .then(function () {
        // always executed
      });

    render() {
        return(
            <div className="asdfs">
                <ApiContent />
            </div>
        );
    }
}

ReactDOM.render(<App />,document.getElementById('root'));

以及获取以下错误列表：

编译失败

./src/index.js语法错误：意外标记（7:7）

6 |类应用程序组件{

7 | axios.get（'http://example.com/api/api/topCardNews')

8|.然后（函数（响应）{

9 |//处理成功

10 |控制台日志（响应）；

This error occurred during the build time and cannot be dismissed.

Answer 1

问题是我必须在任何Javascript事件或constructor（）中使用此api代码。

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import ApiContent from './ApiContent';

class App extends React.Component{
    constructor(props){
        super(props);
        axios.get('http://example.com/api/topCardNews')
          .then(function (response) {
            // handle success
            console.log(response);
          })
          .catch(function (error) {
            // handle error
            console.log(error);
          })
          .then(function () {
            // always executed
          });
    }

    render() {
        return(
            <div className="asdfs">
                <ApiContent />
            </div>
        );
    }
}

ReactDOM.render(<App />,document.getElementById('root'));

Answer 2

您应该在生命周期事件（如ComponentWillMount）或构造函数中调用axios.get（......）。

类组件可以具有声明或函数定义以及呈现。它不能直接调用函数。

Answer 3

将调用函数放入构造函数或componentDidMount函数中，如

class App extends React.Component{
    constructor(props) {
     super(props);
     axios.get('http://example.com/api/api/topCardNews') //...
    }

    componentDidMount(){
      //or here or to other lifecycle function based on needs
    }


    render() {
        return(
            <div className="asdfs">
                <ApiContent />
            </div>
        );
    }
}