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

Question

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>1</div>
    )
}

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 | }

Answer 1

• 哥哥，在 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 方法定义结束时缺少分号，在这种情况下，建议在方法定义结尾加上分号，以防止出现问题。