僅當有資料時才渲染表-有解無憂

我有一種表格。用戶提交后，表單資料會顯示在結果表中。問題是即使在用戶提交表單和資料到來之前，表頭也會顯示出來。

所以我創建了一個變數。

const [flag, setFlag] = useState(false)

在 API 呼叫后，我已將標志設定為 true。

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

在表格組件 div 中，我們放置了這個標志

   <div id="flag">

我也在table組件中嘗試過

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

但他們都沒有作業。你能否提出同樣的建議。

僅當有資料時才渲染表我的要求是只有當 API 被呼叫并且它有資料時才應該呈現表。

uj5u.com熱心網友回復：

退貨部分應該是這樣的

標志檢查：-

    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>

我們使用 &&（AND 運算子）來檢查標志是否為真，然后它顯示表，否則不顯示。

uj5u.com熱心網友回復：

使用 if 陳述句或條件渲染應該這樣做

if (data !== null && data.length > 0){ setFlag(true) } 或者當你呈現內容時 {data ?

：空值 }

uj5u.com熱心網友回復：

          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}

uj5u.com熱心網友回復：

 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 => {})

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/362752.html

標籤：javascript html 反应用户界面 html-table

上一篇：mongoose沒有使用mongoose.connect創建資料庫

下一篇：與JSX.Element反應useState