React axios.get не работает, он говорит, что не удалось скомпилировать - PullRequest
Новая
       31

React axios.get не работает, он говорит, что не удалось скомпилировать

1 голос
/ 15 марта 2019

Я новичок в React. Я пытаюсь получить данные API с помощью axios . Но получаю ошибку. Мой код: 

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 | Приложение класса расширяет React.Component {

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

8 | .then (функция (ответ) {

9 | // обработать успех

10 | console.log (ответ); * * 1 022 

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

Ответы [ 3 ]

2 голосов
/ 15 марта 2019

Поместите функцию вызова в конструктор или функцию 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>
        );
    }
}
1 голос
/ 15 марта 2019

Вы должны вызывать axios.get (.....) в событиях жизненного цикла (например, ComponentWillMount) или в конструкторе.

Компонент класса может иметь либо объявления, либо определения функций вместе с рендерингом. Он не может иметь прямой вызов функции.

0 голосов
/ 16 марта 2019

Проблема в том, что я должен использовать этот код API внутри любого Javascript event или constructor().

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'));
...