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

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

2 个答案: