ReactJS中的表出现两次
我试图在ReactJS中创建一个表,并使用API数据在其中输入行。柱子是固定的。但不知何故,出现了两个表,数据在这两个表中被划分ReactJS中的表出现两次,reactjs,html-table,datatable,react-table,Reactjs,Html Table,Datatable,React Table,我试图在ReactJS中创建一个表,并使用API数据在其中输入行。柱子是固定的。但不知何故,出现了两个表,数据在这两个表中被划分 <React.Fragment> {error ? <p>{error.message}</p> : null} {!isLoading ? ( users.map(user => { const { name, owner } = user; return (
<React.Fragment>
{error ? <p>{error.message}</p> : null}
{!isLoading ? (
users.map(user => {
const { name, owner } = user;
return (
<table class="table table-bordered table-secondary" id="tableBorder">
<thead style={{backgroundColor:"#3787d8",color:"white"}}>
<tr>
<th>Name</th>
<th>Age</th>
<th>Email</th>
</tr>
</thead>
<td>{FullName}</td>
</table>
);
})
) : (
<h3>Loading...</h3>
)}
</React.Fragment>
{error?{error.message}:null}
{!正在加载(
users.map(user=>{
const{name,owner}=user;
返回(
名称
年龄
电子邮件
{FullName}
);
})
) : (
加载。。。
)}
{FullName}给出两个名称,每个表中显示一个。出现这两个表是因为您在映射函数中呈现整个表。尝试仅呈现需要根据数据生成的行/列:
<React.Fragment>
{error ? <p>{error.message}</p> : null}
{!isLoading ? (
<table class="table table-bordered table-secondary" id="tableBorder">
<thead style={{backgroundColor:"#3787d8",color:"white"}}>
<tr>
<th>Name</th>
<th>Age</th>
<th>Email</th>
</tr>
</thead>
{
users.map(user => {
const { name, owner } = user;
return (
<td>{FullName}</td>
);
})
}
</table>
) : (
<h3>Loading...</h3>
)}
</React.Fragment>
{error?{error.message}:null}
{!正在加载(
名称
年龄
电子邮件
{
users.map(user=>{
const{name,owner}=user;
返回(
{FullName}
);
})
}
) : (
加载。。。
)}
对不起,我没听清楚。我上面的代码已经在render方法中。请容忍我,我对React完全陌生:)好的,我明白了。您只需从map函数中删除
标记即可。我会更新我的答案。那应该是你想要的。虽然我不确定FullName
变量来自哪里。。。其思想是通过用户映射
,只为每个项目生成一个新行。不是每个项目的新表。使用当前代码,如果users数组中有10个项,那么最终将得到10个表。有意义吗?修正了。工作很好。非常感谢!:)很抱歉出现语法错误,如果没有编辑器,很容易在括号中丢失!