React类组件使用useState报Unexpected token解析错误求助

• 核心问题是Hooks语法与类组件语法混用：useState、useEffect属于React函数组件专属的Hook API，不允许在类组件中使用；同时JavaScript类的类体语法不支持直接使用const/let声明变量，直接将函数组件的代码移入类的大括号内，会直接触发Unexpected token解析错误。
• 附带的隐性问题：
  • 数据请求方法名拼写错误：fectData漏写字母h，正确应为fetchData，语法修复后如果不修正拼写会触发方法未定义报错。
  • 多余的await关键字：axios返回的响应对象中，response.data已经是解析完成的响应数据，不是Promise对象，不需要额外加await。

二选一即可，根据实际需要使用类组件还是函数组件选择：

方案1：保留类组件写法，遵循类组件语法规范 #

类组件的状态通过this.state初始化，通过this.setState()更新；组件挂载后的副作用逻辑写在componentDidMount生命周期方法中；类方法不需要用const声明，直接作为类属性定义即可，最终实现代码：

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

class PostIndex extends Component {
  // 构造函数初始化状态
  constructor(props) {
    super(props);
    this.state = {
      posts: [] // 对应原useState的初始空数组
    };
  }

  // 组件挂载完成后执行数据请求，等价于原useEffect(..., [])的执行时机
  componentDidMount() {
    this.fetchData();
  }

  // 定义数据请求类方法，修正拼写错误
  fetchData = async () => {
    const response = await axios.get('http://localhost:3000/api/posts');
    const data = response.data.data;
    // 更新组件状态
    this.setState({ posts: data });
  }

  // 类组件必须实现render方法返回渲染内容
  render() {
    const { posts } = this.state;
    return (
      <div className="post-list">
        {/* 替换为实际的列表渲染逻辑 */}
        {posts.map(post => (
          <div key={post.id} className="post-item">
            <h3>{post.title}</h3>
          </div>
        ))}
      </div>
    );
  }
}

export default PostIndex;

方案2：改回函数组件写法，保留原有Hooks逻辑 #

如果不需要使用类组件的特性，直接改回函数组件即可正常使用Hooks，不需要强行改写为类组件，修正拼写和多余await后的代码：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const PostIndex = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const response = await axios.get('http://localhost:3000/api/posts');
    const data = response.data.data;
    setPosts(data);
  };

  return (
    <div className="post-list">
      {/* 替换为实际的列表渲染逻辑 */}
      {posts.map(post => (
        <div key={post.id} className="post-item">
          <h3>{post.title}</h3>
        </div>
      ))}
    </div>
  );
};

export default PostIndex;

内容的提问来源于stack exchange，提问作者funderjimed ieinc