ReactJS中的表出现两次

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 (

我试图在ReactJS中创建一个表,并使用API数据在其中输入行。柱子是固定的。但不知何故,出现了两个表,数据在这两个表中被划分

<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个表。有意义吗?修正了。工作很好。非常感谢!:)很抱歉出现语法错误,如果没有编辑器,很容易在括号中丢失!