मेरे पास एक रूप में टेबल है। उपयोगकर्ता द्वारा प्रपत्र सबमिट करने के बाद परिणाम तालिका में डेटा प्रदर्शित हो जाता है। समस्या यह है कि उपयोगकर्ता द्वारा फॉर्म जमा करने और डेटा आने से पहले ही टेबल हेडर प्रदर्शित हो रहा है।

इसलिए मैंने एक वैरिएबल बनाया।

const [flag, setFlag] = useState(false)

मैंने एपीआई कॉल के बाद ध्वज को सत्य के रूप में सेट किया है।

  const { data } = await axios.get('http://localhost:3000/api/certificates', {
            params: param,
        });
        setFlag(true);  //Here changing the variable value to true.
        setResponse(data);
}

और टेबल कंपोनेंट डिव में हम इस फ्लैग को लगा रहे हैं

   <div id="flag">

मैंने table घटक में भी कोशिश की

 <table className="table table-striped table-bordered " id="flag>

लेकिन उनमें से कोई भी काम नहीं कर रहा है। क्या आप कृपया उसी पर सुझाव दे सकते हैं।

यहां छवि विवरण दर्ज करें मेरी आवश्यकता है तालिका केवल तभी प्रस्तुत की जानी चाहिए जब एपीआई को कॉल किया जाए और इसमें डेटा हो।

0
Niharika S 22 नवम्बर 2021, 10:29
क्या आपने अपने फ़ंक्शन में async कीवर्ड का उपयोग किया है?
 – 
Samira
22 नवम्बर 2021, 10:44

4 जवाब

सबसे बढ़िया उत्तर

रिटर्न सेक्शन में ऐसा होना चाहिए

फ्लैग चेक:-

    return <div>
{flag && 
    <table>
    <tr>
    <th>name</th>
    <th>class</th>
    </tr>
    <table> }
</div>

डेटा जांच:-

return <div>
{(response?.length > 0) && 
    <table>
    <tr>
    <th>name</th>
    <th>class</th>
    </tr>
    <table> }
</div>

हम && (और ऑपरेटर) का उपयोग यह जांचने के लिए कर रहे हैं कि ध्वज सत्य है या नहीं, तो यह तालिका दिखाता है अन्यथा नहीं।

1
Gaurav Singh Negi 22 नवम्बर 2021, 10:59

If कथन या सशर्त रेंडर का उपयोग करना चाहिए

अगर (डेटा! == शून्य && डेटा। लंबाई> 0) {सेटफ्लैग (सत्य)} या जब आप सामग्री को प्रस्तुत करते हैं {डेटा?

: शून्य }
1
Erik Vesa 22 नवम्बर 2021, 11:08
          const { data } = await axios.get('http://localhost:3000/api/certificates', {
                params: param,
            });
//add condition to check the length of data 
if(data.length> 0){
            setFlag(true);  //Here changing the variable value to true.
            setResponse(data);

} else {
 setFlag(false);  
 setResponse(data);
}
    }

JSX में नीचे दिए गए ध्वज का उपयोग करें

{flag?<table className="table table-striped table-bordered " id="flag">:null}
1
Anand Kumar 22 नवम्बर 2021, 11:12
त्रुटि दे रहा है। ध्वज प्रकार jsx.IntrinsicElements पर मौजूद नहीं है। मैंने इसे पहले ही शीर्ष पर घोषित कर दिया है।
 – 
Niharika S
22 नवम्बर 2021, 11:07
1
क्षमा करें, मैं बंद करने से चूक गया " नीचे अद्यतन कोड है। मैंने उत्तर को भी अपडेट कर दिया है {flag?:null}  – 
Anand Kumar
22 नवम्बर 2021, 11:11
धन्यवाद आनंद। इसने काम किया
 – 
Niharika S
22 नवम्बर 2021, 11:20
 let  data  = [];
    axios.get('http://localhost:3000/api/certificates', {
    params: param,
          }).then(response=>{
        data=response.data;
        setFlag(true);  //Here changing the variable value to true.
        setResponse(data);
          }).catch(err => {})
0
Samira 22 नवम्बर 2021, 10:43