为什么错误';'当不需要 semi-colon 时，预计会出现在我的 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 密钥，所以我很困惑为什么会出现此错误。我认为问题并不是真正的 semi-colon，因为我已经尝试添加一个，但它仍然会抛出该错误。我提供了问题行前后代码的屏幕截图，以及教程的相关部分。

这是教程 link，当然我不希望任何人真正阅读它。如果查看上下文有帮助，本教程的这一部分刚刚过了一半，在标题下："Integrating React and Airtable"

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

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

如果您需要其他 information/code 以了解问题所在，请告诉我。非常感谢！

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 class 中寻找方法 componentDidMount()。由于 React 找不到它，您的代码将不会被执行；默认行为将改为运行。

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

componentDidMount() 看起来像一个函数，但是没有 function 关键字。 classes 中的方法允许省略 function 关键字。
componentDidMount() 是缩进的。这是指示代码在代码块内的约定。
componentDidMount() 前后的 ... 省略号表示代码已 "hidden." 如果您正在学习该教程，这应该会让您想知道 [=11 之后应该有什么代码=].前面代码片段中的 ... 省略号暗示应该在那里插入一些东西。
对 JavaScript classes 的基本了解也会有很大帮助。这里有两个很好的资源。关于 JavaScript 的一本好书的简短参考和详细摘录：
- The Secret Life of Objects, Eloquent JavaScript
- Classes reference on MDN

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

为什么错误';'当不需要 semi-colon 时，预计会出现在我的 app.js 文件中？

Why does error ';' expected occur in my app.js file when no semi-colon should be necessary?

javascript

reactjs

airtable