Javascript 反应试图从onClick事件调用自定义挂钩

我正在尝试制作一个按钮来注销用户，并将逻辑移动到自定义钩子useLogout.js

Menu.js

import useLogout from './useLogout';
import UserContext from './UserContext';
import TokenContext from './TokenContext';

function Menu() {
    const [user, setUser] = useContext(UserContext);
    const [token, setToken] = useContext(TokenContext);

/*  some code....*/
 let button;

    if (token && token.access_token && user) {
        button = <Button onClick={useLogout}>Logout</Button>;
    } else {
        button = <Button>Login</Button>;
    }

/* some code.... */
    return(
      <Nav.Link>
          {button}
      </Nav.Link>
    )
}

当我运行这个并点击按钮时，我得到了这个错误：无效的钩子调用。钩子只能在函数组件的主体内部调用 错误：导出默认函数useLogout{ const[user，setUser]=useContextUserContext

所以我认为我调用的函数useLogout是错误的，所以我修改了调用onClick={useLogout}的代码，而不是onClick={useLogout} 所以这条线看起来像这样：

button = <Button onClick={useLogout()}>Logout</Button>;

但是我得到了这个错误：React Hook useLogout被有条件地调用。React Hook必须在每个组件呈现中以完全相同的顺序被调用

就连我也试过：

button = <Button onClick={() => useLogout}>Logout</Button>;

---

如何修改代码，以便在单击按钮时执行useLogout from useLogout.js的函数？

您想要的可能是这样的：

button = <Button onClick={useLogout()}>Logout</Button>;

导出默认函数useLogout{ const[user，setUser]=useContextUserContext； const[token，setToken]=useContextTokenContext； 返回=>{ localStorage.removeItemtoken； localStorage.removitemuser； setToken； 设置用户； } }; /

---

你想要的可能是这样的：

button = <Button onClick={useLogout()}>Logout</Button>;

导出默认函数useLogout{ const[user，setUser]=useContextUserContext； const[token，setToken]=useContextTokenContext； 返回=>{ localStorage.removeItemtoken； localStorage.removitemuser； setToken； 设置用户； } }; /

---

把它弄出来statement@marzelin但是我需要这个条件，如果用户被登录，打印注销按钮，否则登录按钮在函数中输入钩子设置器等的活动部分，然后从钩子返回，并将该函数附加到按钮错误消息提供信息：在每个组件都是这样呈现的，按照marzelin的建议去掉if逻辑——或者更好地将其封装在useLogout.js导出中statement@marzelin但是我需要这个条件，如果用户登录，打印注销按钮，否则登录按钮在函数中输入钩子设置器的活动部分，等等，然后从钩住并将该函数附加到按钮错误消息很有用：在每个组件渲染中必须以完全相同的顺序调用React钩子，因此，按照marzelin的建议将if逻辑取出，或者更好地将其封装在useLogout.js导出中。谢谢。只需问两个问题：在React中这样做正确吗？因为创建一个额外的变量而不是仅仅键入onClick=useLogout是很奇怪的。既然我们没有返回任何信息，为什么我需要将return=>添加到函数中？它可以工作，谢谢。只有两个问题：在react中这样做对吗？因为创建一个额外的变量而不是仅仅键入onClick=useLogout是很奇怪的。为什么我需要因为我们没有返回任何信息，所以要将return=>添加到函数中吗？