JSX map函数内部的错误处理

Question

我有一个map函数，它遍历一个数组并填充一个像这样的表：

var programData = this.state.data.map(program => (
  <tr >

    <td >
      {program.scheduledStartDateTime}
    </td>
    <td>
      {program.searchableTitles[1].value.en}
    </td>
  </tr>
));

但是，有时第二个字段： program.searchableTitles[1].value.en为空，从而导致错误： TypeError: Cannot read property 'value' of undefined

如何处理此异常？ 我尝试添加Try and Catch，但似乎找不到找到使其在JSX代码中工作的方法。

我不在乎什么没有数据存在的领域，可以将其留空。

Answer 1

试试这个

var programData = this.state.data.map(program => (
  <tr>
    <td>
      {program.scheduledStartDateTime}
    </td>
    <td>
      {program.searchableTitles && program.searchableTitles[1] && program.searchableTitles[1].value.en}
    </td>
  </tr>
));

Answer 2

如果要通过API调用获取数据，则数据可能不会立即可用，或者状态没有立即设置。

您可以改为显示其他视图

var programData = this.state.data.map(program => (
  <tr >

    <td >
      {program.scheduledStartDateTime}
    </td>
    <td>
{program.searchableTitles[1] ? 
     program.searchableTitles[1].value.en : <p> Not available </p> }
    </td>
  </tr>
));