为什么出错“;”不需要分号时，我的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将在您的componentDidMount()类中寻找方法App。由于React无法找到它，因此您的代码将不会执行；默认行为将改为运行。

关于如何识别componentDidMount()的一些提示应包含在类中：

• componentDidMount()看起来像一个函数，但是没有function关键字。允许类中的方法省略function关键字。
• componentDidMount()已缩进。这是用于指示代码在代码块内的约定。
• 在...前后的componentDidMount()省略号表示代码已“隐藏”。如果您正在遵循该教程，这应该使您想知道componentDidMount()之后应该包含什么代码。上一个代码段中的...省略号暗示应该在此处插入内容。
• 对JavaScript类的基本了解也会有所帮助。这里有两个很好的资源。一本很棒的JavaScript书的简短参考和详细摘录：
  • The Secret Life of Objects, Eloquent JavaScript
  • Classes reference on MDN

---

顺便说一句，componentDidMount()是React API的一部分。