Question

为什么这段代码会创建“无效的挂钩调用”？

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为返回组件的函数

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

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

1 个答案: