时间戳

首页 > 解决方案 > React axios 不工作它说编译失败

javascript - React axios 不工作它说编译失败

问题描述

我是 React 的新手。我正在尝试使用 axios 获取我的 api 数据。但得到错误。我的代码是：

  import React from 'react';
  import ReactDOM from 'react-dom';
  import axios from 'axios';

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

      render() {
          return(
              <div className="container">
                  <p>Lorem Ipsum Dolor</p>
              </div>
          );
      }
  }

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

获取错误列表：

编译失败

./src/index.js 语法错误：意外令牌 (7:7)

6 | 类 App 扩展 React.Component{

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

8 | .then（函数（响应）{

9 | // 处理成功

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

此错误发生在构建期间，无法消除。

标签： javascriptreactjs

解决方案

您应该像这样在 componentDidMount 中传递 axios 方法：

componentDidMount() {
      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
        });
    }

你也应该导入反应

import { React, ReactDOM } from 'react-dom';

你可以在这里阅读反应 axios 教程：https ://alligator.io/react/axios-react/

推荐阅读