4 replies

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 undefinedundefined instead.

This is my API, a [...param].js[...param].js in folder api/calcCartapi/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 usersArrayusersArray. It is in index.jsindex.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.jsindex.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.

Cannot fetch data for a component from an API

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 usersArrayusersArray. It is in index.jsindex.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.jsindex.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.

Cannot fetch data for a component from an API

Cannot fetch data for a component from an API

Continue the conversation

Reactiflux

Continue the conversation

Reactiflux