React desde cero | 9.1 - Manejo de formularios y autenticación con react

roberto.asturies -@roberto.asturies-2724

Problemas al hacer la consulta a la API reqres en 2025

Buenas, al hacer la consulta a la API hay que añadir una API Key (tienen una por defecto para todas las consultas, no hace falta registrarse en la web) y me costó un poco llegar al fetch correcto. Mi código final es el siguiente:

const iniciarSesión = (e) => {

<span style="color: #9cdcfe;">e</span>.<span style="color: #dcdcaa;">preventDefault</span>()
     <span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #4fc1ff;">usuario</span>)

     <span style="color: #dcdcaa;">fetch</span>(<span style="color: #ce9178;">"https://reqres.in/api/login"</span>, {
             <span style="color: #9cdcfe;">method</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">"POST"</span>,
             <span style="color: #9cdcfe;">headers</span><span style="color: #9cdcfe;">:</span> {
                 <span style="color: #ce9178;">"Content-Type"</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">"application/json"</span>,
                 <span style="color: #ce9178;">"x-api-key"</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">"reqres-free-v1"</span>
             },
             <span style="color: #9cdcfe;">body</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">JSON</span>.<span style="color: #dcdcaa;">stringify</span>(<span style="color: #4fc1ff;">usuario</span>)
         }
     )
     .<span style="color: #dcdcaa;">then</span>((<span style="color: #9cdcfe;">respuesta</span>) <span style="color: #569cd6;">=></span> <span style="color: #9cdcfe;">respuesta</span>.<span style="color: #dcdcaa;">json</span>())
     .<span style="color: #dcdcaa;">then</span>((<span style="color: #9cdcfe;">data</span>) <span style="color: #569cd6;">=></span> <span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #9cdcfe;">data</span>))
     .<span style="color: #dcdcaa;">catch</span>(
         (<span style="color: #9cdcfe;">error</span>) <span style="color: #569cd6;">=></span> <span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">"La petición falló. Error: "</span> <span style="color: #d4d4d4;">+</span> <span style="color: #9cdcfe;">error</span>)
     )

 }

Escribe una respuesta