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

Question

我在控制台中遇到错误

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

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 您可能在同一个应用中拥有多个 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));
     }

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

Answer 1

这是你正在使用的钩子：

const dispatch=useDispatch();

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