Setting state after callback with json data - reactjs

Question

I'm receiving a callback from axios after a post request. The callback contains data that I need to use. I want add the callback json data my existing state - but after googling I learnt that callbacks + usestate hook doesn't work together well.
const [party, setParty] = useState("")
const SubmitParty = (e) => {
e.preventDefault()
const PartyData = {
party: party,
firstname: firstname,
lastname: lastname,
email: email,
number: number
}
axios.post(
'/api/new/party',
{
party: party,
firstname: firstname,
lastname: lastname,
email: email,
number: number
},
{
params: {
"secret_token": logged.token
}
}
).then(res => {
var user = res.data.data;
console.log(user); //I can see the response here and the array I want.
setParty(user);
console.log(party); // returns just a blank line. Expected to be same as user
}).catch(err => {
console.log(err)
alert("Oops something went wrong. If this problem continues, please contact support asap!")
});
}
I tried using a useeffect afterwards, but it's a catch 22, cause I need the state to deal with with in in useeffect accurately.

Answer 1

If you use useEffect like this your component will send the API request and update party when it resolves.
const [party, setParty] = useState("");
useEffect(e => {
e.preventDefault();
const PartyData = {
party: party,
firstname: firstname,
lastname: lastname,
email: email,
number: number
};
axios
.post(
"/api/new/party",
{
party: party,
firstname: firstname,
lastname: lastname,
email: email,
number: number
},
{
params: {
secret_token: logged.token
}
}
)
.then(res => {
var user = res.data.data;
console.log(user); //I can see the response here and the array I want.
setParty(user);
console.log(party); // returns just a blank line. Expected to be same as user
})
.catch(err => {
console.log(err);
alert(
"Oops something went wrong. If this problem continues, please contact support asap!"
);
});
});
By default this will run on every render. If you want the effect to run only once then you should set useEffect's 2nd parameter to be an empty array, or if you only want it to run when a specific few items change then you can put those in the array.