如何修复：TypeError：_services_task_service__WEBPACK_IMPORTED_MODULE_1 __default.fetchTasks不是一个函数

如何解决如何修复：TypeError：_services_task_service__WEBPACK_IMPORTED_MODULE_1 __default.fetchTasks不是一个函数

我的表格训练有问题（使用formik）。该应用程序在没有Todolist组件的情况下运行良好（只需登录并注册到REST）。当我结合“如果用户有效则显示您从api获取的待办事项”的算法。 按登录\用有效的电子邮件注册并通过后，我得到错误：

TypeError: _services_task_service__WEBPACK_IMPORTED_MODULE_1__.default.fetchTasks is not a function

重要说明：登录\注册后，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;

TodoListFunction.js（组件）：

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

task.service.js（服务）：

/**
 * 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();

谢谢！