Javascript 如何修复：TypeError:\服务\任务\服务\网页包\导入的模块\ 1 \默认值。fetchTasks不是函数

我的表单训练（使用formik）有问题。该应用程序在没有Todolist组件的情况下运行良好（只需登录并注册到REST）。当我结合“如果用户是有效的，那么显示您从api中获取的todo”算法时。 按login\register with a valid email&pass后，我收到错误信息：

TypeError:_服务_任务_服务u网页u导入u模块u 1 uu默认值。fetchTasks不是函数

重要提示：在更新了login\register App.js中的令牌之后（因为我将setToken方法发送给了这些组件，所以Todo组件将获得更新的“有效”令牌）

App.js：

import React, {useState} from 'react';
import './App.css';
import Login from './components/Login';
import Register from './components/Register';
import TodoListFunction from './components/TodoListFunction';
import TodoListClass from './components/TodoListClass';

function App() {
  const [token, setToken] = useState(null);

  return (
    <div className="App">
      <div className="container mt-5">
        <div className="row">
          <div className="col-6">
            <Login tokenCb={setToken}/>
          </div>
          <div className="col-6">
            <Register tokenCb={setToken}/>
          </div>  
        </div>
        <div className="row">
          <div className="col-6">
             <TodoListFunction token={token}/> 
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

谢谢

import React, {useState, useEffect} from 'react'
import taskService from '../services/task.service'

export default function TodoListFunction({token}) {

    const [tasks, setTasks] = useState([]);

    useEffect(() => {
        if (!token){
            return
        } else {
            taskService.fetchTasks(token).then((newTasks) => {
                setTasks(newTasks)
            }).catch(err => console.log(err))
        }
    }, [token])

    return (
        <>
            {
                ( !token ) ? 
                    <h1>Unauthorized</h1> : 
                    (<ul className="list-group">
                            {
                                tasks.map((singleTask) => {
                                    return (
                                        <li key={singleTask.id} className="list-group-item">
                                            <h5>{singleTask.title}</h5>
                                            <p>
                                                {singleTask.description}
                                            </p>
                                        </li>
                                    )
                                })
                            }
                    </ul>)
            }
        </>
    )
}

/**
 * send api requests to 
 * https://academeez-login-ex.herokuapp.com/api/tasks/...
 */

class TaskService {
    constructor() {
        this.url = 'https://academeez-login-ex.herokuapp.com/api/tasks/';
    }

    fetchTasks = (token) => {
        return fetch(this.url, {
            headers: {
                'Authorization': `Bearer ${token}`,
                 'Content-Type': 'application/json'
            }
        }).then((response) => {
            if (response.status !== 200) {
                const error = new Error('request error');
                error.response = response;
                throw error;
            }
            return response.json();
        })
    }

}

export default new TaskService();