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

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

这是我的模块，它将配置文件图片上传到我的express服务器

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);
    }
};

通过点击并尝试，我发现行

const{user:token}=useAuth（）；

使其出错

在继续之前，useAuth（）是我跟踪用户的自定义钩子。用户实际上是一个jwt令牌

这是我的useAuth（）

现在，我已经在App.js中创建了一个上下文，从中我获得了这个用户和setUser令牌

请从两个方面帮助我：

请告诉我为什么会发生这个错误，因为正如你们所看到的，我并没有违反任何胡克定律

请告诉我我是否做对了

据

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

✅ 来自React函数组件的调用挂钩

✅ 从定制钩子调用钩子（我们将在下一页了解它们）

您的

useAuth

钩子在

try catch

块内调用。相反，根据

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

✅ 来自React函数组件的调用挂钩

✅ 从定制钩子调用钩子（我们将在下一页了解它们）

---

您的

useAuth

钩子在

try catch

块中被调用。相反，在功能组件的顶层调用它

，因为您的

updateProfilePicture

没有在组件体中被调用，所以您应该将其更改为作为参数接收您的令牌

然后在

组件上

可以在组件体上调用钩子

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>
    </>
  )
}

const updateProfilePicture=（图像，令牌）=>{
//…这里的代码没有“useAuth”
}
常量组件=（{image}）=>{
const{user:token}=useAuth（）；
const onsubmit=（）=>updateProfilePicture（img，令牌）
返回(
上传这里的图片
onsubmit（图像、令牌）}>upload
)
}

由于您的

updateProfilePicture

未在组件主体中调用，因此您应该将其更改为作为参数接收您的令牌

然后在

组件上

可以在组件体上调用钩子

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>
    </>
  )
}

const updateProfilePicture=（图像，令牌）=>{
//…这里的代码没有“useAuth”
}
常量组件=（{image}）=>{
const{user:token}=useAuth（）；
const onsubmit=（）=>updateProfilePicture（img，令牌）
返回(
上传这里的图片
onsubmit（图像、令牌）}>upload
)
}
react功能组件中的钩子必须在主组件函数中使用，或者作为自定义钩子的一部分使用，而不需要条件、循环或回调。
您必须将useAuth hook移动到主组件函数、外部try catch块和外部updateProfilePicture函数中，react函数组件中的hook必须在主组件函数中使用或作为自定义hook的一部分使用，而不带条件、循环或回调。
您必须将useAuth hook移动到主组件函数、外部try catch块和外部updateProfilePicture函数
put调用您的hook out try{}执行此操作。仍然存在相同的错误。put调用您的hook out try{}同样的错误仍然。我做了同样的错误，然后考虑写在你的问题下面的一个更新标题，你是如何解决它的。谢谢你的指导，很棒！继续学习我做了，但是仍然有同样的错误。然后考虑写在你的问题下面的一个更新标题，你是怎样解决它的？谢谢你的指导谢谢！继续学习好的，所以错误不在于此，而在于使用const{setUser}=useAuth（）。但是非常感谢我这么做了。因为我用你的答案解决了它，我会让它通过：）非常感谢。欢迎：）好的，所以错误不在于此，而在于使用const{setUser}=useAuth（）。非常感谢我这么做了。既然我用你的答案解决了它，我会让它通过：）非常感谢。不客气：）是的，我能做到。你是对的，仅在主要功能组件中挂钩。对不起，先生，我只能将1个答案标记为已接受并解决了它。但是非常感谢。不客气。是的，我能做到。你是对的，仅在m中挂钩ain功能组件。对不起，先生，我只能将1个答案标记为已接受，并已解决。但非常感谢。欢迎您。