En primer lugar, soy un novato en todos los aspectos de la interfaz, así que disculpe que la respuesta a estas preguntas probablemente sea solo que soy tonto. Sin embargo, tengo que implementar una forma en que los usuarios puedan cambiar sus contraseñas.

Ya existe un archivo useToken.js, que tiene este aspecto:

 import { useState } from 'react'; export default function useToken() { // Checks storage for existing token. const getToken = () => { var tokenString = ''; tokenString = sessionStorage.getItem('token'); if (tokenString === null) { tokenString = localStorage.getItem('token'); } const userToken = JSON.parse(tokenString); return userToken?.token }; const [token, setToken] = useState(getToken()); const saveToken = userToken => { sessionStorage.setItem('token', JSON.stringify(userToken)); setToken(userToken.token); }; return { setToken: saveToken, token } }

Así que traté de crear una función, que usa la función useToken para enviar las credenciales de autenticación de la API.

 import React, {Component, useState} from 'react'; import useToken from '../security/useToken'; async function ChangeUserPassword(credentials){ return fetch('https://api.testsite.de/change-password/', { method: 'PUT', headers: { 'Authorization': 'JWT ' + useToken(), 'Content-Type':'application/json' }, body: JSON.stringify(credentials) }) .then(data => data.json) } export default function ChangePassword(){ const[old_password, setOldPassword] = useState(); const[new_password, setNewPassword] = useState(); const handleSubmit = async e =>{ e.preventDefault(); const creds = await ChangeUserPassword({ old_password, new_password }); }

La función handleSubmit se llama al presionar un botón y la contraseña_antigua y la contraseña_nueva de los campos de entrada.

Cuando trato de ejecutarlo, me da un 'Error de rechazo no controlado', diciendo que los ganchos solo se pueden llamar dentro del cuerpo de un componente funcional. Así que cambié la ubicación de useToken -call dentro del cuerpo de mi función, pero esto me da exactamente el mismo error.

 async function ChangeUserPassword(credentials){ const [token, setToken] = useState(useToken()); return fetch('https://api.zvconnect.de/change-password/', { method: 'PUT', headers: { 'Authorization': 'JWT ' + token, 'Content-Type':'application/json' }, body: JSON.stringify(credentials) }) .then(data => data.json) }