ReactJs：如何在render方法中使用map函数处理空数组

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

现在我遇到以下错误

由于沙龙没有专家，所以我需要以N / A打印。

如何检查特色菜是否为空并打印N / A。

Answer 1

尝试始终渲染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 2

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

使用这样的条件语句

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

Answer 4

主要出于可读性考虑，我将创建一个单独的函数来返回特殊性（如果有的话），而不是使用object属性，否则将不提供