Cannot fetch data for a component from an API

Hello, I want to fetch data that I successfully collect from a mongodb database and then display it in a dropdown component. But I am unable to receive it and receive undefined instead. This is my API, a [...param].js in folder api/calcCart:
async function handler(req, resp){
// mongoose code
const usersArray = await userscollection.findOne(query);
**return resp.status(200).send({data: usersArray})**
}

export default handler
async function handler(req, resp){
// mongoose code
const usersArray = await userscollection.findOne(query);
**return resp.status(200).send({data: usersArray})**
}

export default handler
This is the function where I fetch this usersArray. It is in index.js:
const calculateCart = async (ipAddress, browserName) =>{

const resp = await fetch(`/api/calcCart/${ipAddress}/${browserName}`, {
method: 'POST'
})
.then((res) => {console.log("SUCCESS in Fetching Product Data", res)


}).then(data =>{console.log("SUCCESS in Resolving Product Data:",data)})
.catch(e => console.log("ERROR:" + e))

}
const calculateCart = async (ipAddress, browserName) =>{

const resp = await fetch(`/api/calcCart/${ipAddress}/${browserName}`, {
method: 'POST'
})
.then((res) => {console.log("SUCCESS in Fetching Product Data", res)


}).then(data =>{console.log("SUCCESS in Resolving Product Data:",data)})
.catch(e => console.log("ERROR:" + e))

}
This is the component where this function is called, also defined in index.js:
const Drop = ({ open }) => {
return (
<div >
{open === true ? (
<div className="dropdown_container">
<div
className="dropdown_item"
onClick={
calculateCart(props.ip, props.browser)
>
Fetched data
</div>

</div>
) : null}
</div>
);
};
const Drop = ({ open }) => {
return (
<div >
{open === true ? (
<div className="dropdown_container">
<div
className="dropdown_item"
onClick={
calculateCart(props.ip, props.browser)
>
Fetched data
</div>

</div>
) : null}
</div>
);
};
I keep seeing this:
SUCCESS in Fetching Product Data
Response { type: "basic", url: "http://localhost:3000/api/calcCart/::ffff:127.0.0.1/Mozilla/…Linux%20x86_64;%20rv:109.0)%20Gecko/20100101%20Firefox/111.0", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers(7), body: ReadableStream, bodyUsed: false }
index.js:521:32
SUCCESS in Resolving Product Data: **undefined** index.js:524:30
SUCCESS in Fetching Product Data
Response { type: "basic", url: "http://localhost:3000/api/calcCart/::ffff:127.0.0.1/Mozilla/…Linux%20x86_64;%20rv:109.0)%20Gecko/20100101%20Firefox/111.0", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers(7), body: ReadableStream, bodyUsed: false }
index.js:521:32
SUCCESS in Resolving Product Data: **undefined** index.js:524:30
If it is being resolved successfully, why is there undefined? If someone could kindly guide me. I have been on this for almost two weeks. Thank you.
UU
Unknown User392d ago
T
ttay24392d ago
Can you hit your api successfully using postman or another application like that? Is this meant to be a POST without any data? I feel like you’re also probably consuming the promise in the first “then”. If you’re expecting a JSON response, then you need to return response.json()
M
Meraj391d ago
I've never used Postman but I managed to get it to work using await on response.json(). then(async (response) => { const data = await response.json(); console.log("SUCCESS in Fetching Product Data", Object.values(data))}
UU
Unknown User391d ago