[未处理的承诺拒绝：错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用

Question

您好，我正在制作一个反应原生应用程序。这是我的第一个 react-native 项目和第二个使用 react 的项目。无论如何，我在我的 react native 项目中遇到了这个错误。我正在发布我的模块，请帮助我。

所以这是我的模块，它将个人资料图片上传到我的快递服务器。

const updateProfilePicture = image => {
    try {
        console.log("Update profile picture hit");
        const { user: token } = useAuth();
        console.log(`Token received: ${token}`);
        const data = new FormData();

        console.log(image);
        
        let fileName = image.split("/");
        fileName = fileName[fileName.length-1]
        console.log(`File name: ${fileName}`)
        let extensionName = fileName.split(".");
        extensionName = extensionName[extensionName.length-1];
        console.log(`Extension name: ${extensionName}`)

        data.append('token', token);

        data.append('pimage', {
            name: Random.getRandomBytes(8).toString('hex')+"."+extensionName,
            type: 'image/'+extensionName,
            uri: image
        });

        console.log(`This is the data\n`+data);

        return authClient.post(endpointUpdatePicture, data);
    } catch(error) {
        console.log("Error in update profile picture", error);
    }
};

从 hit and try 我发现 const { user: token } = useAuth(); 行出错了。

在继续之前，useAuth() 是我用于跟踪用户的自定义挂钩。 user 实际上是一个 jwt 令牌。

这是我的 useAuth()

import { useContext } from 'react';

import authStorage from './storage';
import AuthContext from './context';

import jwt from 'jwt-decode';

export default useAuth = () => {

    const {user, setUser} = useContext(AuthContext);

    const { name, rating, number, uri } = jwt(user);

    const logout = () => {
        setUser(null);
        authStorage.removeToken();
    }

    console.log(`Uri: ${uri}`);

    return { user, setUser, logout, name, rating, number, uri };
}

现在我在我的 App.js 中创建了一个上下文，从那里我得到这个用户和 setUser 基本上是令牌。写这行代码给我带来了钩子错误。

请通过两种方式帮助我：

1. 请告诉我为什么会发生此错误，因为正如您所见，我没有违反任何挂钩法。
2. 如果我做得对，请告诉我。

Answer 1

由于您的 updateProfilePicture 没有在您的组件主体中调用，您应该将其更改为接收您的令牌作为参数。

然后在您的Component，您可以在组件主体处调用您的钩子useAuth，提取所需的令牌。这样您就可以将它作为变量传递给updateProfilePicture 而不会遇到任何错误，因为useAuth 将在您的函数体中正确调用。

您的代码如下所示：

const updateProfilePicture = (image, token) => {
  // ... same code here without 'useAuth'
}

const Component = ({ image }) => {
  const { user: token } = useAuth();

  const onsubmit = () => updateProfilePicture(img, token)

  return (
    <>
      <div>upload here image</div>
      <button onClick={() => onsubmit(image, token)}>upload</button>
    </>
  )
}

Answer 2

react 函数组件中的钩子必须在主组件函数中使用或作为自定义钩子的一部分，没有条件、循环或回调。 您必须将 useAuth 钩子 移动到主组件函数、try-catch 块之外和 updateProfilePicture 函数之外。

Answer 3

根据React Documentation

不要在循环、条件或嵌套函数中调用 Hook。相反，在任何提前返回之前，始终在 React 函数的顶层使用 Hooks。通过遵循此规则，您可以确保每次渲染组件时都以相同的顺序调用 Hook。这就是让 React 在多个 useState 和 useEffect 调用之间正确保留 Hooks 状态的原因。

✅ 从 React 函数组件调用 Hooks。

✅ 从自定义 Hooks 调用 Hooks（我们将在下一页了解它们）。

您的 useAuth 钩子在 try-catch 块内被调用。而是在功能组件的顶层调用它