Question

我是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}]
}

在这里，我确实在jobList中有数据，但是它仍然不呈现该td内容。谁能解释我该怎么做？还是我做错了什么？

Answer 1

您应该映射数组数据（this.props.jobList）而不是对象。 render应该是这样的：

<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>

Answer 2

根据您的评论和所提供的数据，似乎您需要在jobList中呈现内容，而您需要使用嵌套地图之类的内容

<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>

Answer 3

我认为您应该这样做：

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>
);

Answer 4

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

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>    
    
    )

}

看起来也很有趣，特别是对于刚开始做出反应的人们。使组织的语法更全面。

使用map函数在反应中渲染表格主体

4 个答案: