仅当有数据时才呈现表答案

【问题标题】：Rendering table only if has data仅当有数据时才呈现表
【发布时间】：2021-12-31 20:18:54
【问题描述】：

我有一种形式的表格。用户提交表单后，数据将显示在结果表中。问题是在用户提交表单和数据之前，表格标题就已经显示出来了。

所以我创建了一个变量。

const [flag, setFlag] = useState(false)

API 调用后我已将标志设置为真。

  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 并且有数据时才应该呈现表格。

【问题讨论】：

你在函数中使用了 async 关键字吗？

标签： javascript html reactjs user-interface html-table

【解决方案1】：

返回部分应该是这样的

标志检查：-

    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 运算符）来检查标志是否为真，否则它显示表格，否则不显示。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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}

【讨论】：

给出错误。 jsx.IntrinsicElements 类型上不存在标志。我已经在上面声明了。
对不起，我错过了关闭“下面是更新的代码。我也更新了答案 {flag?:空}

【解决方案4】：

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

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

或者当你渲染内容时

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

【讨论】：