React axios.get not working 它说编译失败

Posted 2023-02-22

【中文标题】React axios.get not working 它说编译失败

【英文标题】：React axios.get not working it's says failed to compile

【发布时间】：2019-08-06 22:17:08

【问题描述】：

我是 React 的新手。我正在尝试使用 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 |类 App 扩展 React.Component

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

8 | .then(函数（响应）

9 | // 处理成功

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

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

【问题讨论】：

您正试图在类声明中调用函数。将您的函数调用放在类构造函数或类实例方法中。

@DanO 我很抱歉让我用构造函数试试这个

【参考方案1】：

将调用函数放在构造函数或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>
        );
    

【参考方案2】：

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

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

【参考方案3】：

问题是我必须在任何javascript event 或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'));