React函数组件出现Unexpected Token解析错误，请求排查问题原因

嘿，我来帮你梳理下代码里的错误，你遇到的这个语法报错和逻辑问题其实都是函数式组件里的常见坑：

1. useEffect的用法完全错了 #

useEffect是用来处理副作用（比如数据请求、订阅）的钩子，它的回调函数要么返回一个清理函数（比如取消订阅），要么啥都不返回。你现在把组件要渲染的JSX放在useEffect的返回里，这完全不符合它的设计——组件的UI输出应该直接在Tasks函数的末尾返回，不是塞到副作用钩子里面。

2. renderList函数的定义语法错误 #

你用了类组件里的方法写法renderList(tasks) { ... }，但Tasks是个箭头函数式组件，在函数内部定义子函数得用函数表达式或者箭头函数的方式，比如：

const renderList = (tasks) => {
  console.log(tasks)
  return <li>dd</li>
}

原来的写法会被JS解析器当成非法语法，这就是你看到Unexpected token, expected ";"报错的直接原因。

3. 组件本身没有返回UI内容 #

因为你把本该组件返回的JSX放到了useEffect里，导致整个Tasks组件没有任何输出，就算语法没问题，页面上也看不到东西。

修复后的完整代码 #

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

const Tasks = () => {
  const [tasks, setTasks] = useState([]);

  // 用箭头函数定义内部渲染函数
  const renderList = (tasks) => {
    console.log(tasks);
    // 如果是真实场景，建议遍历tasks生成列表项，记得加key：
    // return tasks.map(task => <li key={task.id}>{task.title}</li>);
    return <li>dd</li>;
  };

  useEffect(() => {
    // 这里只处理数据请求的副作用
    axios.get('/tasks').then(response => setTasks(response.data));
  }, []);

  // 组件的UI在这里返回
  return (
    <ul>
      {renderList(tasks)}
    </ul>
  );
};

export default Tasks;

小补充：如果之后要遍历tasks生成列表，记得给每个<li>加上唯一的key属性，这是React列表渲染的硬性要求，能避免不必要的重渲染问题。

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