不变违规：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用答案

【问题标题】：Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component不变违规：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用
【发布时间】：2019-08-12 15:41:40
【问题描述】：

所以我在从 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>
  )
};

【问题讨论】：

第一步，这样做是非常糟糕的做法：onClick={() => {alert('Please....'); signIn(); toggleCartClose()}}。将其提取到组件内它自己的函数中。也可以尝试在组件函数中移动 signIn 函数以查看错误是否消失。看起来反应试图找出它应该使用内联的范围并出错
这段代码中的Router是什么？
@RyanCogswell 它引用了Router from 'next/router';

标签： reactjs react-hooks

【解决方案1】：

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

signup.js

  const [ toggleCartClose ] = useMutation(
    TOGGLE_CART_CLOSE_MUTATION,
  );

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

【讨论】：