开发者问题收集

在 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