React.js钩子：TypeError：Object（...）不是一个函数

Question

我正在尝试使用React.js钩子。 不幸的是，每当我尝试包含确实包含钩子用法的组件时， 我确实收到以下错误消息：

TypeError：Object（...）不是函数

misc / TestComponent / element.js：

import React, { Component, Fragment} from 'react';
import { useState } from 'react';

function Example() {
    const [count, setCount] = useState(0);
    return (
      <div>
        <p>Used {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click here
        </button>
      </div>
    );
  }


export default class TestComponent extends Component {
    render() {
      return (
        <Fragment>
          <Example />
        </Fragment>
      )
    }
  }

App.js：

// Components
import React, { Component, useState, Fragment} from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch,
 } from 'react-router-dom';
import TestComponent from './components/misc/TestComponent/element.js'
import Body from './components/body/main_view/element.js'
// Static Files
import './App.css';
class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Fragment>
        <Router>
          <Switch>
            <Route path={"/news"} component={TestComponent} />
          </Switch>
        </Router>
      </Fragment>
    );
  }
}

export default App;