javascript - 为什么出错“;”当不需要分号时，预期会在我的app.js文件中发生吗？

我正在用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

如果有人能告诉我发生了什么，我将不胜感激。我对这个特定代码的理解还不是很强，因为我只是想完成本教程并理解其中的每个部分。

如果您需要其他信息/代码来知道出了什么问题，请告诉我。非常感谢！

最佳答案

方法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的一部分。

关于javascript - 为什么出错“;”当不需要分号时，预期会在我的app.js文件中发生吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56353566/