Javascript 使用map函数在react中渲染表体

我是

react的新手。

这里我有一个数组中的数据。现在 我想呈现表格数据。使用map函数，我尝试的是

    <tbody>
                { this.props.jobList.length > 0 &&  this.props.jobList.content.map(function (item, key) {
                  return (
                    <tr key={key}>
                      <td>1</td>
                      <td>2</td>
                      <td>3</td>
                      <td>4</td>
                      <td>5</td>
                      <td>6</td>
                      <td>7</td>
                    </tr>
                  )
                })}
</tbody>

{
    "content": [{
        "id": "5b7d4a566c5fd00507501051",
        "hrmsJdId": null,
        "companyId": null}]
}

{this.props.jobList.length>0&&this.props.jobList.content.map（函数（项，键）{
返回(
1.
2.
3.
4.
5.
6.
7.
)
})}
{
“内容”：[{
“id”：“5b7d4a566c5fd00507501051”，
“hrmsJdId”：空，
“companyId”：null}]
}

---

在这里，我在作业列表中有数据，但它仍然没有呈现td内容。谁能解释一下我该怎么做？或者我哪里做错了？

根据您的评论和您提供的数据，您似乎需要呈现作业列表中的内容，对于这些内容，您需要使用嵌套的映射，如

<tbody>
    {this.props.jobList && this.props.jobList.length > 0 && this.props.jobList.map((item, key) => {
        return (
          <React.Fragment>
             {item.content.map(job => (
                  <tr key={job.id}>
                     <td>id: {job.id}</td>
                     <td>company: {job.company}</td>
                   </tr>
             ))}
          </React.Fragment>
        )
    })}
</tbody>

{this.props.jobList&&this.props.jobList.length>0&&this.props.jobList.map（（项，键）=>{
返回(
{item.content.map（作业=>(
id:{job.id}
公司：{job.company}
))}
)
})}

您应该映射数组数据（

this.props.jobList

）而不是对象<代码>渲染应如下所示：

<tbody>
    {this.props.jobList && this.props.jobList.content && this.props.jobList.content.length > 0 && this.props.jobList.content.map((item, key) => {
        return (
            <tr key={key}>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
            </tr>
        )
    })}
</tbody>

var {jobList} = this.props;
var result = null;
if(jobList.length >0){
   result = jobList.map(value,key){
       return (
          <tr key={key}>
             <td>{value.content.id}</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
          </tr>
       );
   }
}
return (
    <tbody>
        {result}
    </tbody>
);

{this.props.jobList&&this.props.jobList.content&&this.props.jobList.content.length>0&&this.props.jobList.content.map（（项，键）=>{
返回(
1.
2.
3.
4.
5.
6.
7.
)
})}

我想你应该这样做：

<tbody>
    {this.props.jobList && this.props.jobList.content && this.props.jobList.content.length > 0 && this.props.jobList.content.map((item, key) => {
        return (
            <tr key={key}>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
            </tr>
        )
    })}
</tbody>

var {jobList} = this.props;
var result = null;
if(jobList.length >0){
   result = jobList.map(value,key){
       return (
          <tr key={key}>
             <td>{value.content.id}</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
          </tr>
       );
   }
}
return (
    <tbody>
        {result}
    </tbody>
);

var{jobList}=this.props；
var结果=null；
如果（jobList.length>0）{
结果=jobList.map（值、键）{
返回(
{value.content.id}
2.
3.
4.
5.
6.
7.
);
}
}
返回(
{result}
);

这是我在基于类的组件中测试的一个解决方案

render()
{
    return(
        <tbody>
            {this.props.jobList && this.props.jobList.content && this.props.jobList.content.length > 0 && this.props.jobList.content.map((item, key) => {
                    return(
                    <tr key={key}>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                    </tr>
                )

            })}


        </tbody>    
    
    )

}

render（）
{
返回(
{this.props.jobList&&this.props.jobList.content&&this.props.jobList.content.length>0&&this.props.jobList.content.map（（项，键）=>{
返回(
1.
2.
3.
4.
5.
6.
7.
)
})}
)
}

---

看起来也很有趣，尤其是对于刚开始学习的人来说。使组织的语法更全面。

作业列表

是一个数组或

作业列表。内容

？作业列表是一个数组，而内容是一个对象您必须映射到

作业列表

，而不是

作业列表。内容

，因为映射是在数组上定义的。是否需要括号帮助<代码>{（this.props.jobList.length>0）&&this.props.jobList.content.map（函数如果

作业列表

是一个数组，那么通过它映射。是否

作业列表。内容

是一个数组？否，它给我未定义的长度这不是呈现表数据这是不是使用React的版本16？是否也有任何错误是的，我使用的是版本16，因为它有片段实际上现在它没有给出任何错误，但它是他没有表现出来data@ganeshkaspate请给我您的

this.props.jobList

数据实际上this.props.jobList是一个对象，其中的内容是objects@ganeshkaspate你能发布你的

这个.props.jobList的示例数据吗