如何在 React 中使用鈎子？

Question

我有狀態（ true或false ）的信息，我想顯示這個Navbar組件是否為真，但是當我使用鈎子時，我收到一條錯誤消息：鈎子錯誤

我的代碼：

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';

import store, { history } from './reduxStore';
import AppRouterContainer from './pages/AppRouterContainer';

import Feedback from './pages/feedback/Feedback';
import Navbar from './components/Navbar/Navbar';
import { useTypedSelector } from '../src/hooks/useTypedSelector';

const isAuth = useTypedSelector((state) => state.auth.isAuth);

const App = () => (
  <BrowserRouter>
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <AppRouterContainer />
        {isAuth && (
          <Navbar />
        )}
        <Feedback />
      </ConnectedRouter>
    </Provider>
  </BrowserRouter>
);

export default App;

Answer 1

1. 您需要創建一個包裝器組件才能訪問存儲在您的上下文中（我認為您的useTypedSelector()鈎子需要該訪問權限）。
2. 您只能在函數內部使用鈎子，而不僅僅是在模塊內部。

看看這個例子：

import React from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router';

import { useTypedSelector } from '../src/hooks/useTypedSelector';
import Navbar from './components/Navbar/Navbar';
import AppRouterContainer from './pages/AppRouterContainer';
import Feedback from './pages/feedback/Feedback';
import store, { history } from './reduxStore';

const NavbarWrapper = () => {
  const isAuth = useTypedSelector((state) => state.auth.isAuth);

  if (!isAuth) {
    return null;
  }

  return <Navbar />;
};

const App = () => (
  <BrowserRouter>
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <AppRouterContainer />
        <NavbarWrapper />
        <Feedback />
      </ConnectedRouter>
    </Provider>
  </BrowserRouter>
);

export default App;

另外，我認為您應該將NavbarWrapper組件移動到一個單獨的文件中。