固定冲突:无效的挂钩调用.钩子只能在函数组件的主体内部调用

Question

所以我在从onClick事件调用钩子突变(toggleCartClose(后收到上述错误，该事件需要在触发onClick事件(SickButton(时进行操作。我该如何解决此问题？

注意：如果我删除onClick事件中的signIn();调用，则错误将消失。

const signIn = props => {
Router.push({
pathname: '/signup',
query: { fromCart: 'true' }
})
};
const Cart = props => {
const { data: dataQuery, error: errorQuery, loading: loadingQuery } = useQuery(
LOCAL_STATE_QUERY,
);
const [ toggleCartClose ] = useMutation(
TOGGLE_CART_CLOSE_MUTATION,
);
const [ toggleCart ] = useMutation(
TOGGLE_CART_MUTATION,
);
return (
<User>
{({ data: { me }, loading, error }) => {
...
return (
<CartStyles open={dataQuery.cartOpen}>
<header>
...
<footer>
<table width="100%" border="0">
<tbody>
<tr>
<td colSpan="2">
<div>
<SickButton loggedout disabled={loading} onClick={() => {alert('Please....'); signIn(); toggleCartClose()}} background={loading ? props => props.theme.grey : props => props.theme.blue}>Checkout</SickButton>
</div>                
</td>
</tr>
</tbody>
</table>
</footer>
</CartStyles>
);
}}
</User>
)
};

Answer 1

所以我通过将突变钩子调用移动到被调用的路由来解决这个问题：

注册.js

const [ toggleCartClose ] = useMutation(
TOGGLE_CART_CLOSE_MUTATION,
);
useEffect(() => {
if (fromCart) {
toggleCartClose();
}
}, [urlReferer]);