Question

我有点陷入这种情况。我知道要解决这种错误，我们必须将它们包装在容器或其他东西中。但在这种情况下，我无法做到。如果有任何解决方案，请告诉我。

<div className="table-responsive col-lg-12">
  <table className="table table-bordered table-hover">
    <thead>
      <tr className="active">
        <th className="width10">Name</th>
        <th className="width10">Number</th>
        <th className="width12">Email</th>
        <th className="width10">User Handle</th>
        <th className="width12">Address</th>
        <th className="width10">Device IMEI</th>
        <th className="width10">Mapped Date</th>
      </tr>
    </thead>
    { this.state.userDetails.map((user,i)=>{
        return(
          <tbody key={i}>
            <tr>
              <td>{user.fn ? user.fn : "-"}</td>
              <td>{user.mob ? user.mob : "-"}</td>
              <td>{user.eml ? user.eml : "NA"}</td>
              <td>{user.uh ? user.uh : "-"}</td>
              <td>{user.add ? user.add : "-"}</td>
            {this.state.deviceDetails.map((dev,i)=>{
              if(user.idx == dev.uid){
                return(
                  <td>{dev.imei ? dev.imei : "-"}</td>
                  <td>{dev.dm ? dev.dm : "-"}</td>
                )
              }
            })}
            </tr>
          </tbody>
        )
      })
    }
  </table>
</div>

上面是我想要渲染的表格。有两个数组，我必须从中显示我的表格内容。所以我必须为两个不同的数组执行两次映射。当我映射this.state.userDetails时，我收到了错误。如果我将其封装在<div>或<tr>内，则内容将被放置在设备IMEI <th>中。我怎么解决这个问题？任何帮助非常感谢.. :)

Answer 1

使用JSX糖包装您的内容应该有效。你不需要压扁生成的数组，React会为你做这件事。请参阅 JSX Docs:

error parsing block: expected a constraint or lang:ordering pragma (Error BLOCK_PARSE)

请参阅React Github页面上引发的 this 问题。

从地图返回多个而不将它们包装在封闭的标记内

1 个答案: