react的componentDidMount函数报错missing semicolon，如何解决

react的componentDidMount()函数报错missing semicolon，如何解决，完整代码如下

function Article() {
    loadList = async () => {
        const res = await axios.get('http://159.75.234.216:8888/alldata')
        console.log(res)
    }

    componentDidMount() {
        this.loadList()
    }

    return (
        <div>1div>
    )
}

export default Article

报错如下：

SyntaxError: E:\code\web\src\pages\Article\index.js: Missing semicolon. (77:23)

  75 |     }
  76 |
 77 |     componentDidMount() {
     |                        ^
  78 |         this.loadList()
  79 |     }
  80 | }

• 哥哥，在 React 中，componentDidMount 是类组件中的生命周期函数，并不是函数组件中可以直接使用的函数。因此，您需要将 Article 函数改写为类组件，并将 loadList 和 componentDidMount 方法放在类定义中。另外，报错信息指出缺少分号，这可能是因为在前面的函数定义语句中缺少分号。

以下修改后的代码为：

import axios from 'axios';
import React, { Component } from 'react';

class Article extends Component {
  loadList = async () => {
    const res = await axios.get('http://159.75.234.216:8888/alldata');
    console.log(res);
  };

  componentDidMount() {
    this.loadList();
  }

  render() {
    return <div>1</div>;
  }
}

export default Article;

• 在上述代码中，我们将 Article 函数转换为了类组件，并将 loadList 和 componentDidMount 方法放在了类定义中。同时，我们添加了 render 方法以返回 JSX 元素。

• 另外，注意到在 loadList 方法定义结束时缺少分号，在这种情况下，建议在方法定义结尾加上分号，以防止出现问题。

参考GPT和自己的思路：

您好，根据代码和报错信息，问题出在缺少分号。您需要在 loadList 函数后添加分号。修改后的代码如下：

```
function Article() {
loadList = async () => {
const res = await axios.get('http://159.75.234.216:8888/alldata');
console.log(res);
};

componentDidMount() {
    this.loadList();
}

return (
    <div>1</div>
)

}

export default Article
``

参考GPT和自己的思路：

根据代码提供的内容和报错信息，我们可以看出，componentDidMount()函数定义没有以分号结束，所以才会出现 missing semicolon 的错误提示。解决这个问题的方法就是在 componentDidMount() 函数的结尾添加一个分号，代码如下所示：

componentDidMount() {
  this.loadList();
}

注意，分号是 JavaScript 语言中一种语法规则，代码中必须遵守分号的使用规范，否则会出现类似的报错信息。

missing semicolon
看看是不是少写了分号