Component not showing data after useRef

MMeraj

4/6/2023

Hello, A little explanation before the code: I am fetching data from a database asynchronously. Fetches just fine using the function fetchData. Then to stop continuous re-rendering I use useRef instead of useState to set two arrays cdata and pdata. Their console.log shows it worked. However, when I call my component after onclick neither cdata nor pdata are available. I cant use useEffect as I need my data to be available after onclick and fetchData within useEffect means it is only available after the page re-renders. Not at onclick.

UUUnknown User

4/6/2023

Message Not Public

MMeraj

4/6/2023

Now the code:

const fetchData = async (ipAddress, browserName) => {

    const result = await fetch(`/api/calcCart/${ipAddress}/${browserName}`, {
      method: 'POST'
    }).then(async(response)=>{console.log("response in fetchData is");
    console.table(response);
    const data  = await response.json();
    console.log("data in fetchData is");
    console.table(data);
    if(data){
    cdata = Object.values(data)[0];
    pdata = Object.values(data)[1];
   
    // setcData(cdata);
    // setpData(pdata);
    ref={cdata};
    ref={pdata};
        console.log("cdata in fetchData is:",cdata);
console.log("pdata in fetchData is:",pdata);
    for(let i=0; i<pdata.length;i++){
    for(let j=0; j<pdata[i].length;j++)
   userData[j] = {products:pdata[i][j],count: cdata[i][j]};

        }
        //setuserData(userData);
        ref={userData};
    console.log("userData in fetchData is:");
    console.table(userData);
    }}).catch(console.error());
    console.log("cdata outside then in fetchData is:",cdata);
    console.log("pdata outside then in fetchData is:",pdata);
   
  };

//The component:
function ShowCounts(){
  
    
  fetchData(props.ip,props.browser);
  if(cdata.length>0 && pdata.length>0){
return(<div className='cart-products'>
           
{cdata.length>0 ?
cdata.map(countArray=>{
  countArray.map(counts=>{
    
   return <div>{counts}</div>
    
  }) 
  
}): <div>No counts yet</div>}
  </div>)}
}


//I show the component here:
const Dropdown = ({ open }) => {
return (
    <div >
      {open === true ? (
        <div className="dropdown_container">
          <div
            className="dropdown_item"
 >
           
            <ShowCounts/>
 </div>
         
        
   
          
        </div>
      ) : null}
    </div>
  );
};

const fetchData = async (ipAddress, browserName) => {

    const result = await fetch(`/api/calcCart/${ipAddress}/${browserName}`, {
      method: 'POST'
    }).then(async(response)=>{console.log("response in fetchData is");
    console.table(response);
    const data  = await response.json();
    console.log("data in fetchData is");
    console.table(data);
    if(data){
    cdata = Object.values(data)[0];
    pdata = Object.values(data)[1];
   
    // setcData(cdata);
    // setpData(pdata);
    ref={cdata};
    ref={pdata};
        console.log("cdata in fetchData is:",cdata);
console.log("pdata in fetchData is:",pdata);
    for(let i=0; i<pdata.length;i++){
    for(let j=0; j<pdata[i].length;j++)
   userData[j] = {products:pdata[i][j],count: cdata[i][j]};

        }
        //setuserData(userData);
        ref={userData};
    console.log("userData in fetchData is:");
    console.table(userData);
    }}).catch(console.error());
    console.log("cdata outside then in fetchData is:",cdata);
    console.log("pdata outside then in fetchData is:",pdata);
   
  };

//The component:
function ShowCounts(){
  
    
  fetchData(props.ip,props.browser);
  if(cdata.length>0 && pdata.length>0){
return(<div className='cart-products'>
           
{cdata.length>0 ?
cdata.map(countArray=>{
  countArray.map(counts=>{
    
   return <div>{counts}</div>
    
  }) 
  
}): <div>No counts yet</div>}
  </div>)}
}


//I show the component here:
const Dropdown = ({ open }) => {
return (
    <div >
      {open === true ? (
        <div className="dropdown_container">
          <div
            className="dropdown_item"
 >
           
            <ShowCounts/>
 </div>
         
        
   
          
        </div>
      ) : null}
    </div>
  );
};

I only get 'No counts yet' despite the fact that console.log does show cdata and pdata correctly. If anyone could help me out I would be greatly obliged.

UUUnknown User

4/7/2023

Message Not Public

MMeraj

4/7/2023

Thank you for your answer. I have understood what you are saying. Let me try going back to useState and useEffect with what you have mentioned.

Looking for more? Join the community!

Reactiflux

Component not showing data after useRef

Join Server

Reactiflux

Component not showing data after useRef

Join Server

Want results from more Discord servers?

Add your server