0

我正在使用 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 密钥，所以我很困惑为什么会发生这个错误。我认为问题不是真正的分号，因为我尝试添加一个，但它仍然会引发该错误。我已经包含了问题行之前和之后的代码截图，以及教程的相关部分。

这就是教程所说的要添加到我的 app.js 中的内容

错误突出显示，周围有上下文代码

这是教程链接，当然我不希望有人真正阅读它。如果查看上下文有帮助，本教程的这一部分刚刚过了一半，在标题下：“集成 React 和 Airtable”

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

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

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

4

1 回答 1

6

方法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修复了语法错误，但并没有消除根本问题：您的程序将不会按照预期的方式运行！componentDidMount()在这种情况下，React 会在你的App类中寻找一个方法。由于 React 找不到，所以你的代码不会被执行；默认行为将改为运行。

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

  • componentDidMount()看起来像一个函数，但没有function关键字。类中的方法可以省略function关键字。
  • componentDidMount()是缩进的。这是指示代码在代码块内的约定。
  • ...前后的省略号componentDidMount()表示代码已“隐藏”。如果您正在学习该教程，这应该会让您想知道应该在componentDidMount(). 前面代码片段中的...省略号暗示应该在那里插入一些东西。
  • 对 JavaScript 类的基本了解也会有很大帮助。这里有两个很好的资源。一本关于 JavaScript 的好书的简短参考和详细摘录：

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

于 2019-05-29T06:02:53.260 回答