“无效的钩子调用。只能在函数组件的主体内部调用钩子”问题

Posted 2023-03-10

【中文标题】“无效的钩子调用。只能在函数组件的主体内部调用钩子”问题

【英文标题】："Invalid hook call. Hooks can only be called inside of the body of a function component" problem

【发布时间】：2020-10-27 14:34:03

【问题描述】：

我在控制台中遇到错误

错误！！ [错误：无效的挂钩调用。钩子只能在里面调用 功能组件的主体。这可能发生在其中一个 原因如下：

您的 React 和渲染器版本可能不匹配（例如 React DOM） 您可能违反了 Hooks 规则 您可能在同一个应用中拥有多个 React 副本*

   import firebase from '../../database/firebase';
   import  useDispatch  from 'react-redux';
   import * as actions from "../../store/actions";

    export const userProfilePcture =(id)=>
       const image = firebase.storage().ref(id + '/profilePicture');
       var user = firebase.auth().currentUser;
       image.getDownloadURL().then((url) => 
       user.updateProfile(
          photoURL: url
        ).then(() =>
          console.log("updete succefully");
          updeteUser();
        ).catch(error =>
         console.log("error!!",error);
        );
    
      );


      ;

       export const updeteUser=()=>
       const dispatch=useDispatch();
       var user = firebase.auth().currentUser;
       dispatch(actions.updateUser(user));
     

我怎样才能避免这种情况？

【问题讨论】：

这能回答你的问题吗？ Invalid hook call. Hooks can only be called inside of the body of a function component

在上面的帖子中，您可以找到有关挂钩的文档链接。你的组件应该是一个合适的功能组件（以大写字母开头）或者它应该以use开头。

这能回答你的问题吗？ React Hooks Error: Hooks can only be called inside the body of a function component

【参考方案1】：

这是你正在使用的钩子：

const dispatch=useDispatch();

你只能在 React 功能组件中使用钩子。现在你正试图在一个普通的 javascript 函数中使用这个钩子。