仅当有数据时才呈现表

Posted 2023-03-25

【中文标题】仅当有数据时才呈现表

【英文标题】：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 关键字吗？

【参考方案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