Este es mi código que estoy usando para intentar iniciar sesión en mi aplicación react/flask:
const logitin = ({username, password}) => { console.log('this place',username, password) function loginuser({username, password}) { fetch(`http://localhost:5000/userlookup`, { 'method':'POST', mode: 'cors', headers: { 'Content-Type':'application/json' }, body: JSON.stringify(username, password) }) .catch(error => console.log('error time!', username, password)) } return (<div>{loginuser()}</div>) } console.log('that place', username, password) logitin({username, password}) la línea que dice console.log('this place', username, password) y console.log('that place', username, password) me dice exactamente lo que espero que sean el nombre de username y la password .
Este es el error que recibo: TypeError: (destructured parameter) is undefined
Esta declaración de función aquí:
function loginuser({username, password}) { crea un nuevo ámbito para las variables nombre de username y password , y las desestructura a partir del argumento pasado.
Esa función se llama aquí:
return (<div>{loginuser()}</div>)Sin ningún argumento. Esto significa que el usuario de inicio de sesión comenzará intentando hacer:
{ username, password } = undefinedCuál es el tipo de error que estás recibiendo.
Más allá de eso, no debería llamar a funciones en JSX como esta.
Haga de esto una función ordinaria:
const logitin = async ({ username, password }) => { try { await fetch(`http://localhost:5000/userlookup`, { method: "POST", mode: "cors", headers: { "Content-Type": "application/json", }, body: JSON.stringify(username, password), }); return true; } catch (error) { console.log("error time!", username, password); return false; } };Esto devolverá verdadero/falso dependiendo de si la solicitud tuvo éxito.
O si este es un componente de reacción, use un useEffect :
const logitin = ({ username, password }) => { useEffect(() => { function loginuser() { fetch(`http://localhost:5000/userlookup`, { method: "POST", mode: "cors", headers: { "Content-Type": "application/json", }, body: JSON.stringify(username, password), }) .then(() => { // update global state, redirect somewhere, idk }) .catch((error) => console.log("error time!", username, password)); } loginuser(); }, []); return <div>Logging in...</div> };