在 ReactJS 中处理 null
2020-05-31
749
我有一张表格,从 Web - Api 填充。
当我删除部门时,链接到某个用户。部门对象获取 null。我的 React 应用程序崩溃并出现以下错误:TypeError: 无法读取 null 的属性“name”
我试过这样的三元组,但没有帮助
(typeof user !=='undefined' && typeof user.department.name !=='undefined') ? user.department.name : ''
refreshList()
{
fetch("https://localhost:5001/api/users")
.then(response=> response.json())
.then(data=> {
this.setState({users:data});
});
}
render(){
const {users, userid, username, userfullname, department} = this.state;
return(
<tbody>
{users.map(user=>
<tr key = {user.id}>
<td>{user.id}</td>
<td>{user.userName}</td>
<td>{user.fullName}</td>
<td>{user.department.name}</td> <---- here i am getting crash when department is null
....
)
3个回答
这是一个 JavaScript 错误。如果您尝试访问对象中为 null 或未定义的属性,您将收到类型错误。解决方案是在显示数据之前验证数据,如下所示:
<td>{user.department && user.department.name}</td>
Victor
2020-05-31
这也可以处理未定义和空的情况。
<td>{user.department && user.department.name || ''}</td>
hendrixchord
2020-05-31
请按如下方式更正您的三元组...
{user.department ? user.department.name : ''}
此处,仅当
user.department
不为
null
时才检查
user.department.name
。
Sennen Randika
2020-05-31