how to make useState hook act like synchronous function? - reactjs

Question

here is my code,
const App= () => {
const [someData, setSomeData] = useState('');
const [token, setToken] = useState('');
const fetchingAPI = async () => {
try {
const response = await someAPI();
const data = response.data.data;
const tokenData = response.data.token;
setSomeData(data);
setToken(tokenData);
return true;
} catch (err) {
console.log(err)
return false;
}
};
const onSubmitHandler = async (e: any) => {
e.preventDefault();
const fetchHandler = async () => {
const data = await fetchingAPI();
return data ? e.target.submit() : '';
};
fetchHandler();
};
return (
<div>
<button onClick={toPreviousStep}>previous step</button>
<form
action="https://somewebsite.com"
method="POST"
onSubmit={onSubmitHandler}>
<button>
<input type="hidden" name="someData" value={someData} />
<input type="hidden" name="token" value={token} />
confirm
</button>
</form>
</div>
);
};
when user click confirm button, I would try to fetch some data from backend and store it in a state.
If nothing goes wrong, it would be submitted and redirect to another website.
However, the problem is state doesn't change immediately, so it just bring an empty string to the third party website.
how should I fix this code? thank you.

Answer 1

I solve this problem with document.querySelector, and here is my code
const App= () => {
const fetchingAPI = async () => {
const data = document.querySelector<HTMLInputElement>.
('#data');
const token = document.querySelector<HTMLInputElement>('#token');
try {
const response = await someAPI();
if (data) data.value = response.data.data;
if (token) token.value = response.data.token;
return true;
} catch (err) {
console.log(err)
return false;
}
};
const onSubmitHandler = async (e: any) => {
e.preventDefault();
const fetchHandler = async () => {
const data = await fetchingAPI();
return data ? e.target.submit() : '';
};
fetchHandler();
};
return (
<div>
<button onClick={toPreviousStep}>previous step</button>
<form
action="https://somewebsite.com"
method="POST"
onSubmit={onSubmitHandler}>
<button>
<input type="hidden" name="someData" value="data" id="data" />
<input type="hidden" name="token" value="token" id="token" />
confirm
</button>
</form>
</div>
);
};
It makes both data and token input change immediately.