Meraj•3y ago

Component not showing data after useRef

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.

3 Replies

MerajOP•3y ago

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.

Unknown User•3y ago

Message Not Public

MerajOP•3y ago

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.

Component not showing data after useRef

Did you find this page helpful?