仅在有数据时渲染 table

Question

我有 table 的一种形式。用户提交表单数据后，结果显示 table。问题是 table header 甚至在用户提交表单和数据出现之前就已经显示了。

所以我创建了一个变量。

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);
}

并且在 table 组件 div 中我们放置了这个标志

   <div id="flag">

我也在table组件中试过

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

但是 none 他们在工作。能否请您提出相同的建议。

我的要求是 table 只有在 API 被调用并且它有数据时才应该呈现。

Answer 1

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

Answer 2

return段应该是这样的

标志检查：-

    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 运算符）来检查标志是否为真然后显示 table 否则不显示。

Answer 3

          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}

Answer 4

使用 if 语句或条件渲染应该可以做到

if (data !== null && data.length > 0){
setFlag(true)
}

或者当您呈现内容时

{data ? 
<div id="flag"> </div> : null }

仅在有数据时渲染 table

Rendering table only if has data

html

javascript

user-interface

html-table

reactjs