javascript - JSX 映射函数内部的错误处理

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 和 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>
));