next.js 无效挂钩调用-在单个React.js文件中有效，而不是在2个ReactJS文件中有效

ldxq2e6h 于 2023-01-25 发布在 React

关注(0)|答案(2)|浏览(120)

我正在尝试在ReactJS应用程序的导航栏中设置注销按钮。
我在App.tsx中有以下功能：

import Navbar from './Navbar';

function App() {
  const [provider, setProvider] = useState<SafeEventEmitterProvider | null>(
    null
  );


  const logout = async () => {
    await authlibrary.logout();
    setProvider(null);
  };

const loggedInView = (
    <>
       <div className="App">
       <button onClick={logout} className="card">
        Log Out
       </button>
       <Navbar /> 
       <BrowserRouter>
        <div className="Content">
          <Routes>
            <Route path="/" element={<Home />}>
            </Route>
            <Route path="/other" element={<OtherRoute />}>
            </Route>
          </Routes>
        </div>
      </BrowserRouter>
      <Footer />
      </div>
    </>
  );

  const mql = window.matchMedia('(max-width: 576px)');

let mobileView = mql.matches;
  if (mobileView) {
  return (
    <div className="container">
      <div className="grid">{provider ? loggedInView : unloggedInView}</div>
    </div>
  );
 }
}
export default App;

在上面的例子中，按钮按预期工作，但是，我希望现在把它放在我的导航栏上，它在一个单独的文件Navbar.tsx中，如下所示：

import logout from './App';

const Navbar = () => {
    return ( 
        
        <nav className="nav sidebar">
            <a href="/home" className="nav__link">Home</a>
            <a href="/other" className="nav__link">Other Stuff</a>
            <button onClick={logout} className="nav__link" id="btn-logout">Log Out</button>
            
        </nav>
     );
}
 
export default Navbar;

当我单击上面Navbar.tsx中的按钮时，我在控制台日志中得到以下错误：
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
我知道我误用了钩子来得到错误消息，但是，我不知道如何正确使用第二个Navbar.tsx文件中的钩子？

next.js

来源：https://stackoverflow.com/questions/75142298/invalid-hook-call-works-in-single-react-js-file-not-in-2-reactjs-files

2条答案

按热度按时间

2mbi3lxu1#

为了正确使用Navbar.tsx文件中的logout钩子，我需要将logout函数作为一个prop传递给Navbar组件，然后在单击logout按钮时调用该函数。下面是一个如何实现的示例：
在应用程序tsx中：

const logout = async () => {
    await web3auth.logout();
  };

return (
    <BrowserRouter>
        <Navbar logout={logout} />
        <Routes>
            {/* Add your routes here */}
        </Routes>
    </BrowserRouter>
)

在导航栏.tsx中：

interface Props {
    logout: () => void;
}

const Navbar: React.FC<Props> = ({ logout }) => {
    return (
        <nav>
            {/* Other navbar code */}
            <button onClick={logout}>Logout</button>
        </nav>
    );
};

export default Navbar;

您需要确保在用户通过身份验证后调用注销函数，否则用户可能无法注销。

赞(0）回复(0）举报 2023-01-25

11dmarpk2#

在您的导航栏组件中，您尝试从App组件导入注销函数并将其用作钩子，但钩子只能在函数组件的主体内使用，而不能在其他组件或常规JavaScript文件中使用。要解决此问题，您可以将注销函数作为prop传递给导航栏组件，并在注销按钮的onClick事件中使用。
在应用程序tsx中：

const loggedInView = ( <> <Navbar logout={logout} /> <BrowserRouter>
  <div className="Content">
    <Routes>
      <Route path="/" element={<Home />}>
      </Route>
      <Route path="/other" element={<OtherRoute />}>
      </Route>
    </Routes>
  </div>
</BrowserRouter>
<Footer /> </> );

在导航栏. tsx中：

interface Props { logout: () => void } const Navbar: React.FC<Props> = ({ logout }) => { return (
<nav className="nav sidebar">
  <a href="/home" className="nav__link">Home</a>
  <a href="/other" className="nav__link">Other Stuff</a>
  <button onClick={logout} className="nav__link" id="btn-logout">Log Out</button>
</nav> ); } export default Navbar;

赞(0）回复(0）举报 2023-01-25

我来回答

next.js 无效挂钩调用-在单个React.js文件中有效，而不是在2个ReactJS文件中有效

2条答案

相关问题

热门标签

最新问答