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

我有一个映射函数，它迭代数组并填充如下表：

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

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

var programData=this.state.data.map（程序=>(
{program.scheduledStartDateTime}
{program.searchableTitles[1].value.en}
));

---

但是，有时第二个字段：

program.searchableTitles[1].value.en

为空，从而导致错误：

TypeError:无法读取未定义的属性“value”

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

我不介意在没有数据的字段中输入什么，它可以保留为空。

试试这种方法

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

var programData=this.state.data.map（程序=>(
{program.scheduledStartDateTime}
{program.searchableTitles&&program.searchableTitles[1]&&program.searchableTitles[1].value.en}
));

试试这种方法

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

var programData=this.state.data.map（程序=>(
{program.scheduledStartDateTime}
{program.searchableTitles&&program.searchableTitles[1]&&program.searchableTitles[1].value.en}
));

如果您通过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>
));

var programData=this.state.data.map（程序=>(
{program.scheduledStartDateTime}
{program.searchableTitles[1]？
program.searchableTitles[1].value.en:不可用
));

如果您通过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>
));

var programData=this.state.data.map（程序=>(
{program.scheduledStartDateTime}
{program.searchableTitles[1]？
program.searchableTitles[1].value.en:不可用
));

{program.searchableTitles[1].value.en |''''这行吗？@Pragun这行不通，因为

searchableTitles[1]

已经

未定义

@Pragun-nope它不{program.searchableTitles[1].value.en |'''这行吗？@Pragun这行不通，因为

searchableTitles[1]

已经是

未定义的

@pragun不，它不知道为什么会被否决。这基本上是OPs问题的直接解决方案。不起作用：TypeError:无法读取undefinedWell的属性“1”，我更新了答案。这不好，但我们不知道你的数据丢失的程度不知道为什么会被否决。这基本上是OPs问题的直接解决方案。不起作用：TypeError:无法读取undefinedWell的属性“1”，我更新了答案。这不太好，但我们无法知道您的数据丢失的深度

程序。searchableTitles[1]。在您的情况下，value

会得到与用户完全相同的错误。它应该是

program.searchableTitles[1]

此解决方案不起作用，但您可能是对的，我花了很长时间才从api获得完整响应。有什么方法可以延迟渲染吗？

程序。searchableTitles[1]。在您的条件下，value

会得到与用户完全相同的错误。它应该是

program.searchableTitles[1]

此解决方案不起作用，但您可能是对的，我花了很长时间才从api获得完整响应。有没有办法延迟渲染？