Question:

Why Next.js: `onSubmit` not executing callback function in React

Solution

Here, we will assume a function getCertificate defined in the .txt file.

Now, if you only want to execute the function getCertificate, then the following code will help you achieve the goal:

import React, { useState } from "react";

const serverUri = "http://myserver.com";

export default function Certificate() {

const [id, setId] = useState("");

async function getCertificate(id: string): Promise<Response> {

console.log("in getCertificate");

const resp = await fetch(`${serverUri}/certs/${id}`);

console.log(`Response data: ${await resp.json()}`);

return resp;

}

return (

<form onSubmit={async (event: any) => {

event.preventDefault();

try {

const response = await getCertificate(id);

const data = await response.json();

console.log(data);

} catch (err) {

console.error(err);

}

console.log("getCertificate completed");

}}>

<label>

Certificate ID:

<input type="text" value={id} onChange={e => setId(e.target.value)} />

</label>

<button type="submit">Submit</button>

</form>

);

}

Expected Result:

In the above image, you can see that getCertificate is printed to the console.

Why did it fail to execute?

Let's take an example:

() => {

async() => await getCertificate(id)

.then(async resp => await resp.json())

.then(data => console.log(data))

.catch(err => console.error(err))

console.log("getCertificate completed")

}

As you can see, you simply define an anonymous async arrow function here (it is never called because it is never assigned to a variable) and then run console.log. Thus, the only thing that is run is console.log.

Also, you add await before the call to getCertificate, it is not required and may lead to additional confusion.

Let's simplify this code line

async() => await getCertificate(id)

.then(async resp => await resp.json())

.then(data => console.log(data))

.catch(err => console.error(err))

Let’s try reformatting the code and see whether it gives different result:

async() => {

await getCertificate(id)

.then(async resp => await resp.json())

.then(data => console.log(data))

.catch(err => console.error(err))

}

We need to remove unnecessary function definitions:

await getCertificate(id)

.then(async resp => await resp.json())

.then(data => console.log(data))

.catch(err => console.error(err))

Remove unnecessarily await:

getCertificate(id)

.then(async resp => await resp.json())

.then(data => console.log(data))

.catch(err => console.error(err))

Another solution

Thus, we can define the entire function differently by utilizing the transformations from the previous section.

(event: any) => {

event.preventDefault();

getCertificate(id)

.then(async resp => await resp.json())

.then(data => console.log(data))

.then(() => console.log("getCertificate completed with no errors"))

.catch(err => console.error(err))

.then(() => console.log("getCertificate completed with errors"))

}

Keep in mind that in both cases, event.preventDefault() will prevent form data from actually being transmitted and force all handling to be done in JavaScript. It is not required and can be left out.

>Fix react useState and array.map not work issue

>Making infinite scrolling using react-query

>How does React State with JSON arrays affect performance?

>setlist{nosep} not work in the acronym package

>Fix ScrollIntoView not working issue

>Testing react component with jest

>How you can Show or hide elements in React?

>Testing react components using Hooks and Mocks

>Tips for using React Redux Hooks to show or hide React components