useLocation: Hooks 只能在函数组件的主体内部调用

Posted 2023-02-21

【中文标题】useLocation: Hooks 只能在函数组件的主体内部调用

【英文标题】：useLocation: Hooks can only be called inside of the body of a function component

【发布时间】：2020-06-17 04:21:28

【问题描述】：

我正在尝试在我的函数组件中使用 useLocation 挂钩，但我得到了 Error: Invalid hook call. Hooks can only be called inside of the body of a function component.。

我的应用结构如下：

import React, useEffect, useState from "react";
import Navigation from "./components/Navigation";
import  BrowserRouter as Router, Switch, Route  from "react-router-dom";

function App() 
    // ...
    return (
        <Router>
            <div>
                // ...
                <Navigation themes=themes />
                // ...
                <Switch>
                    <Route path="/mytheme">
                        <MyTheme />
                    </Route>
                </Switch>
            </div>
        </Router>
    );


export default App;

Navigation 组件（见上文）如下所示：

import React from "react";
import  Link, useLocation  from "react-router-dom";

function Navigation(props) 
    const location = useLocation(); // ---> this is the problem
    return (
        <div>
            
                props.themes.map((theme, index) => 
                    return <Link key=index to="/" + theme.id>
                         theme.name 
                    </Link>
                )
            
        </div>
    );


export default Navigation;

导航工作正常，但我想在Navigation 组件中使用useLocation 来突出显示活动的“页面”。

【问题讨论】：

您的react 和react-dom 版本匹配吗？

@HunterMcMillen 是的，两者都是16.12.0。

嗯，除了文档指出的其他两个问题似乎不相关：reactjs.org/warnings/invalid-hook-call-warning.html

删除这一行后错误就消失了？也许还有另一个钩子导致了这个问题？您使用它的方式似乎是正确的。

我用基本相同的代码做了一支笔，我没有看到任何错误：codepen.io/mcmillhj/pen/OJVxPdR?editors=1111。您可以发布更多代码吗？周围的代码可能存在问题。有没有使用其他的钩子？

【参考方案1】：

尝试使用功能箭头组件，该行对我有用。

【讨论】：

您可以添加代码sn-p以便更好地理解

【参考方案2】：

我有同样的错误，只是我的函数被称为 getSearch()。 我觉得这很奇怪，因为一切都根据 React 文档。 发生我只需要将函数名改名为useSearch()，即use前缀。

【参考方案3】：

对于任何人都可能面临这个愚蠢的错误，我有同样的错误，因为我的功能组件名称是“索引”。 只是更改组件的名称是我的解决方案。