ReactJs：如何在渲染方法中使用地图函数处理空数组

Question

我正在尝试使用一些 JSON 数据打印表，但是在使用 map 方法时无法呈现空数组。

JSON 数据：

 [{ "id": 6, "firstname": "Sharon", "lastname": "Jenkins", "specialties": [] }, { "id": 2, "firstname": "Helen", "lastname": "Leary", "specialties": [{ "id": 1, "name": "radiology" }] }, { "id": 4, "firstname": "Rafael", "lastname": "Ortega", "specialties": [{ "id": 2, "name": "surgery" }] }, { "id": 5, "firstname": "Henry", "lastname": "Stevens", "specialties": [{ "id": 1, "name": "radiology" }] }]

我的代码：

 {this.state.vets.map(vet =><tr><td>{vet.firstname}</td> { vet.specialties.map((subitem,i) => { return <td>{subitem.name}</td> })}<td>EDIT</td><td id={vet.firstname}><div class="funkyradio">

现在我收到以下错误

由于 Sharon 没有专家，我需要打印为 N/A。

如何检查专业为空并打印 N/A。

Answer 1

像这样使用条件语句

{ this.state.vets.length > 0 
 ? this.state.vets.map(()=>Your logic)
 : <Your custom message/>
}

Answer 2

尝试始终渲染 TD 标签，例如：

{
  this.state.vets.map(vet =>
    <tr>
      <td>{vet.firstname}</td>
        <td>                
          {vet.specialties.map((subitem,i) => {
            return <span>{subitem.name}</span>
          })}
        </td>
        <td>EDIT</td>
        <td id={vet.firstname}>
          <div class="funkyradio">

Answer 3

 <table> {dataJSON.map(({ id, firstname, lastname, specialties }) => { return ( <tr> <td> {`${firstname} ${lastname}`} </td> <td> {specialties.map(specialty => specialty.name).join(",")} </td> <td> <span> EDIT </span> </td> </tr> ); })} </table>

Answer 4

主要是为了可读性，而不是使用 object 属性，我将创建一个单独的函数，该函数将返回特殊性（如果有），否则 N/A