Question

我是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（'here'）

8 | .then（function（response）{

9 | //处理成功

10 | console.log（response）;

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

Answer 1

将此添加到文档顶部

import React from 'react';

Answer 2

将调用函数放在构造函数或componentDidMount函数之内

        string ID = File.ReadAllText(@"C:\Users\Desktop\Script\zig.txt");
        Console.WriteLine(ID);
        Console.ReadLine();


        String root = @"C:\Users\Desktop\Script\tiptop\";
        String[] lines = System.IO.File.ReadAllLines(@"C:\Users\Desktop\Script\zig.txt");

        for (int i = 0; i <= lines.Length; i++)
        {
            string fullPath = System.IO.Path.Combine(root,(lines[i-1]));

            if (System.IO.File.Exists(fullPath))
            {
                Console.WriteLine("" + fullPath);
            }

        }

        for (int i = 0; i <= lines.Length;i++)
        {
            //Console.WriteLine("" + lines[i]);
            string fullPath = Path.GetFullPath(@"C:\Users\Desktop\Script\tiptop\");

            Console.WriteLine(System.IO.Directory.EnumerateFiles(@"C:\Users\Desktop\Script\tiptop\", lines[i]));

Answer 3

首先，在文件的开头添加import React from 'react';。

第二，当要在将组件呈现到DOM时进行AJAX调用时，应将调用放在componentDidMount()内。

根据您的情况，代码应如下所示：

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

  class App extends React.Component {
    componentDidMount() {
      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'));

您可以阅读有关组件生命周期方法here的更多信息。

Answer 4

您应该像这样在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
        });
    }

还应该导入react

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

您可以在此处阅读react axios教程：https://alligator.io/react/axios-react/

React axios无法正常工作，表示编译失败

4 个答案: