為什么出錯“;” 當不需要分號時，預期會在我的app.js文件中發生嗎？

Question

我正在用React創建一個Chrome擴展程序，該擴展程序使用Airtable數據庫，從教程中逐字復制代碼。 在我的app.js中，我遵循在構造函數方法下添加名為“ componentDidMount”的方法的說明，該方法調用Airtable API從中獲取數據值。

我在第一行的左花括號中收到一個錯誤：

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。 我還粘貼了自己的唯一ID密鑰，因此對於為什么會發生此錯誤感到困惑。 我認為問題實際上不是分號，因為我嘗試添加一個，但仍然會拋出該錯誤。 我提供了緊接在問題行前后的代碼的屏幕快照，以及教程的相關部分。

這是教程鏈接，盡管我當然不希望有人真正閱讀它。 如果對了解上下文有幫助，則本教程的這一部分已經過了一半，標題為：“集成React和Airtable”

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

如果有人能告訴我發生了什么，我將不勝感激。 我對這個特定代碼的理解還不是很強，因為我只是想完成本教程並理解其中的每個部分。

如果您需要其他信息/代碼來知道出了什么問題，請告訴我。 非常感謝！

Answer 1

方法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將在您的App類中尋找一個方法componentDidMount() 。 由於React無法找到它，因此您的代碼將不會執行； 默認行為將改為運行。

有關如何識別componentDidMount()一些技巧，應該包裝在一個類中：

• componentDidMount()看起來像一個函數，但是沒有function關鍵字。 允許類中的方法省略function關鍵字。
• componentDidMount()是縮進的。 這是用於指示代碼在代碼塊內部的約定。
• 在...之前和之后的省略號componentDidMount()表明代碼已經被“隱藏”。 如果您正在學習該教程，這應該使您想知道在componentDidMount()之后應該包含哪些代碼。 上一個代碼段中的...省略號表示應在此處插入內容。
• 對JavaScript類的基本了解也將大有幫助。 這里有兩個很好的資源。 一本很棒的JavaScript書的簡短參考和詳細摘錄：
  • 對象的秘密生活，雄辯的JavaScript
  • 有關MDN的課程參考

---

順便說一句， componentDidMount()是React API的一部分。