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