Question

我有一个像这样的项目对象

projects: {
   projectType: {id: 1, title:'something'},
   budgetType: {id: 1, title:'something'},
   projectStatus: {id: 1, title: 'something'}
}

并在渲染方法中渲染它。

<td>{this.props.projects.projectType.title}</td>
<td>{this.props.projects.budgetType.title}</td>
<td>{this.props.projects.projectStatus.title}</td>

这样可以正常工作，但有时服务器在该对象不存在时发送null，因为它不是要输入的必填字段。因此，这会抛出一个＆＃34;无法读取null错误的属性＆＃34;。我在每种情况下都使用三元运算符来解决这个看起来不太好的错误。有没有更好的方法来解决这个问题？

<td>{(this.props.projects.projectType.title)?this.props.projects.projectType.title: ''}</td>

编辑：我有一个＆＃34; ProjectList＆＃34;列出所有项目行的组件

//in render
<tbody>
    {Object.keys(this.props.projects).map(this.renderProject)}
</tbody> 

//renderProject Function
<Project key={key} project={this.props.projects[key]}/>

Answer 1

访问null的属性时，Javascript会抛出此错误。我们使用的一种常用模式是：

this.props.projects.projectType && this.props.projects.projectType.title

此处仅在第一个表达式为true时才计算第二个表达式。 null和undefined为false，因此第二个不会被评估，不会引发任何错误。

这是因为false && <whatever> === false

如果projectType不是null，则表达式的值将等于链中的最后一项。

这可以用以下方式链接：

this && this.props && this.props.projects && this.props.project.projectType;

但始终建议将这些检查保留在javascript文件中，并为视图使用一些派生属性。

我不知道＆符号是否是反应表达式中的有效令牌。 请参考其他答案，了解如何以React方式处理此类案件。

Answer 2

为什么不创建一个简单的辅助方法来接受该属性并返回值或空字符串（如果为null）？你仍然会做三元运算符，但只能在一个地方

处理＆＃34;无法读取null的属性＆＃34;错误

2 个答案: