My userData return undefined react js fetch - reactjs

Question

On my console log, i can see my object for my response.json but i think i forget something for my setUser because my object return undefined ?
function Profil() {
const [user, setUser] = useState({});
const getUser = () => {
const headers = new Headers({
"Content-Type": "application/json",
"X-Requested-With": "XMLHttpRequest",
Authorization: "Bearer " + localStorage.getItem("token"),
});
const options = {
method: "GET",
headers: headers,
};
fetch(
"https://..../user",
options
)
.then((response) => {
return console.log(response.json());
})
.then(
(responseObject) => {
const userData = responseObject;
setUser({ ...user, userData });
console.log(user);
},
(error) => {
console.log(error);
}
);
};
useEffect(() => {
getUser();
}, []);
return (
<div>
<h1> Prénom</h1>
</div>
);
}
export default Profil;
my object on my console log is
[[PromiseResult]]: Object
email: "test#gmail.com"
firstname: "test"
lastname: "test"
_id: "61519405b8dc4a001be666"

Answer 1

You're returning undefined from your Promise:
.then((response) => {
return console.log(response.json());
})
response.json() itself returns a Promise, so return that:
.then((response) => {
return response.json();
})
There's no need to log the Promise itself. If you want to log the raw response JSON to the console then do that in the next Promise:
.then(
(responseObject) => {
// here:
console.log(responseObject);
const userData = responseObject;
setUser({ ...user, userData });
console.log(user);
},
(error) => {
console.log(error);
}
);
Additionally, be aware of what this is doing:
console.log(user);
This will log the state of user when this code is running. It will not reflect the update from here:
setUser({ ...user, userData });
Because that state update happens asynchronously. If you want to log the updated state value, either do it in a useEffect, or directly in the rendering of the component, or just log the object you're passing to setUser.
You also don't need your userData variable at all. It adds no value and is just a reference to responseObject.