Почему ошибка ';'ожидается, что произойдет в моем файле app.js, когда не нужно вводить точку с запятой? - PullRequest
Новая
       20

Почему ошибка ';'ожидается, что произойдет в моем файле app.js, когда не нужно вводить точку с запятой?

1 голос
/ 29 мая 2019

Я создаю расширение Chrome с React, которое использует базу данных Airtable, дословно копируя код из учебника. В моем app.js я следую инструкциям по добавлению метода с именем componentDidMount под методом конструктора, который вызывает API Airtable для получения значений данных из него.

Я получаю сообщение об ошибке при открытии фигурной скобки в первой строке: 

componentDidMount() {
  fetch('https://api.airtable.com/v0/app172rHs45CgT8UH/Favorites? api_key=YOUR_API_KEY')
  .then((resp) => resp.json())
  .then(data => {
     this.setState({ movies: data.records });
  }).catch(err => {

  });
}

Точная ошибка: ';' ожидается. TS (1005)

Я скопировал строку кода для строки из учебника и настроил свой Airtable. Я также вставил свой уникальный идентификационный ключ, поэтому я не понимаю, почему возникает эта ошибка. Я полагаю, что проблема на самом деле не в точке с запятой, потому что я попытался добавить ее, и она все равно выдает эту ошибку Я включил снимок экрана с кодом, который появляется непосредственно перед и после проблемной строки, а также соответствующий раздел руководства.

this is what the tutorial says to add to my app.js

error highlighted, with contextual code surrounding it

Вот ссылка на учебник, хотя, конечно, я бы не ожидал, что кто-нибудь прочтет ее. Если полезно увидеть контекст, эта часть руководства находится чуть ниже середины, под заголовком «Интеграция React и Airtable»

https://upmostly.com/tutorials/create-simple-web-app-react-airtable/#introduction

Буду признателен, если кто-нибудь скажет мне, что может происходить. Мое понимание этого конкретного кода еще не очень сильное, так как я просто пытаюсь завершить урок и понять каждую его часть.

Если вам нужна другая информация / код, чтобы узнать, что не так, пожалуйста, дайте мне знать. Большое вам спасибо!

1 Ответ

7 голосов
/ 29 мая 2019

Метод componentDidMount() должен идти внутри class App (где находится конструктор): 

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
          movies: [],
        };
    }

    componentDidMount() {
        fetch('https://api.airtable.com/v0/appgOPm5an5ZzNvkk/favorites?api_key=YOUR_API_KEY')
        .then((resp) => resp.json())
        .then(data => {
           this.setState({ movies: data.records });
        }).catch(err => {
            // Error ?
        });
    }    
}

Это делает componentDidMount() методом-членом class App.Классы - это способ логически сгруппировать связанные методы и переменные в один объект.

Простое добавление function исправляет синтаксическую ошибку, но не устраняет основную проблему: ваша программа не будет вести себя ожидаемым образом!В этом случае React будет искать метод componentDidMount() в вашем App классе.Поскольку React не может его найти, ваш код не будет выполнен;вместо этого будет работать поведение по умолчанию.

Некоторые советы о том, как распознать componentDidMount(), должны быть заключены в класс:

  • componentDidMount() выглядит как функция, но нетfunction ключевое слово.Методы в классах могут опускать ключевое слово function.
  • componentDidMount() имеет отступ.Это соглашение для указания, что код находится внутри блока кода.
  • ... эллипсирует до и после componentDidMount() указывает, что код был «скрыт».Если вы следуете этому руководству, это должно заставить вас задуматься, какой код должен появиться после componentDidMount().... в предыдущем фрагменте кода намекает на то, что туда нужно что-то вставить.
  • Базовое понимание классов JavaScript также очень поможет.Вот два хороших ресурса.Краткий справочник и подробный отрывок из великой книги по JavaScript:

Кстати, componentDidMount() является частью React API.

...