React中使用箭头函数出现Unexpected token错误，求解决方法

你的代码存在几个核心问题，导致箭头函数处出现语法错误，以下是具体修复步骤：

1. 修复类组件继承问题 #

React类组件必须继承React.Component，否则无法正确使用组件的state、生命周期等核心特性，也会导致super(props)报错。修改类定义：

class TodoList extends React.Component {
  // ... 其余代码
}

2. JSX中嵌入JavaScript需用大括号包裹 #

在JSX内部执行JavaScript逻辑时，必须用{}将代码包裹起来，否则会被解析为普通文本，导致箭头符号被误识别为HTML实体。修改render方法：

render() {
  return (
    <ul id="todo-list" className="todo-app__list">
      {this.state.itemList.map((item) => (<TodoItem key={item.id} />))}
    </ul>
  );
}

3. 将itemList改为数组类型 #

map是数组的专属方法，你当前定义的itemList是对象，无法调用该方法。修改state初始化：

this.state = {
  itemList: [], // 改为数组类型
  total: 0
}

4. 添加组件导出 #

组件需要导出才能被其他文件引用，在文件末尾添加导出语句：

export default TodoList;

5. 列表渲染添加key属性 #

React要求列表渲染的每个子元素必须有唯一的key属性，避免渲染警告（可根据你的item实际属性调整key值）。

完整修正后的代码 #

import React from "react";
import '../styles.css'
import TodoItem from "../component/todoItem";

class TodoList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            itemList: [],
            total: 0
        }
    }

    render() {
        return (
            <ul id="todo-list" className="todo-app__list">
                {this.state.itemList.map((item) => (<TodoItem key={item.id} />))}
            </ul>
        );
    }
}

export default TodoList;

完成以上修改后，箭头函数的语法错误会消失，同时解决了React组件的其他基础问题。

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