Рендеринг тела таблицы в реакции с использованием функции карты

Question

Я новичок в react. Здесь у меня есть данные, которые находятся в массиве. Теперь Я хочу отобразить эту таблицу data.used с помощью функции 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, но они все равно не отображают этот тд контент. Может ли кто-нибудь объяснить мне, как я могу это сделать? Или где я делаю не так?

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

Я думаю, вы должны сделать так:

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 3

Исходя из ваших комментариев и предоставленных вами данных, кажется, что вам нужно визуализировать содержимое в 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>