两行功能组件中的无效钩子调用

Question

为什么这段代码会创建 'Invalid hook call'？

react和react-dom是同一个版本v16.8.6.

仅仅调用useState会触发错误？

我错过了什么？

$ npm ls react react-dom
vehmain@0.1.0 /mnt/g/development/javascript/pow-vehmain
├── react@16.8.6
└── react-dom@16.8.6

运行时间：

Invalid hook call. Hooks can only be called inside of the body of a function component...
ServiceVisitMaintenance
src/components/ServiceVisit/ServiceVisitMaintenance.js:3
  1 | import React, { useState } from 'react';
  2 | 
> 3 | const ServiceVisitMaintenance = () => {
  4 |   const [vehicleList, setVehicleList] = useState([]);
  5 |   return <div>Hello</div>;
  6 | };

ServiceVisitMaintenance.js:

import React, { useState } from 'react';

const ServiceVisitMaintenance = () => {
  const [vehicleList, setVehicleList] = useState([]);
  return <div>Hello</div>;
};

export { ServiceVisitMaintenance };

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
import * as serviceWorker from './serviceWorker';

import './index.css';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();1

App.js

import React from 'react';
import { BaseLayout } from './BaseLayout';

import { BrowserRouter as Router } from 'react-router-dom';

const App = () => (
  <Router>
    <BaseLayout />
  </Router>
);
export { App };

BaseLayout.js

import React from 'react';
import { Route, Link, Switch } from 'react-router-dom';
import './App.css';

import { ServiceVisitMaintenance } from './components/ServiceVisit/ServiceVisitMaintenance';

const BaseLayout = () => (
  <div>
    <aside>
      <ul>
        <li>
          <Link to='/ServiceVisitMaintenance'>Service Visit</Link>
        </li>
      </ul>
    </aside>
    <article>
      <Switch>
        <Route path='/ServiceVisitMaintenance' exact render={ServiceVisitMaintenance} />
      </Switch>
    </article>
  </div>
);

export { BaseLayout };

Answer 1

将您的 Route props 从 render 更改为 component

<Route path='/ServiceVisitMaintenance' exact component={ServiceVisitMaintenance} />

或者使 render 成为 returns 组件

的函数

<Route path='/ServiceVisitMaintenance' exact render={() => <ServiceVisitMaintenance />} />

两行功能组件中的无效钩子调用

Invalid hook call in two-line functional component

react-hooks