React+Express中Axios获取数据后读取Roles[0].name致页面空白问题

在React项目中，通过Axios从Express后端获取用户数据时，尝试访问dataUtilizador.Roles[0].name会导致页面空白，报错Uncaught TypeError: Cannot read properties of undefined (reading '0')。但将Axios返回的数据复制到本地JSON文件（Record）后，访问Record.Roles[0].name却能正常运行。

代码示例 #

import Record from './asd.json';

this.state = {
  dataUtilizador: [],
  content: ""
};
  
getUser(id) {
  UserService.findUser(id)
    .then(response => {
      this.setState({
       dataUtilizador: response.data,
      });
     // console.log(response.data)
    })
    .catch(e => {
     alert(e)
    });
}

const {dataUtilizador} = this.state;   
return( 
<div className="col-md-3 mb-3">
<label>Roles</label>
<select class="custom-select" onChange={this.onChangeEstado} required>

  <option selected value="test"> { Record.Roles[0].name }</option>
  <option selected value="test"> { dataUtilizador.Roles[0].name }</option> 
</select>
         )

Axios响应数据 #

{
      "IDUtilizador": 7,
      "username": "utilizador4",
      "email": "denisevink@mphaotu.com",
      "nome": "Júlio César Luís",
      "estado": true,
      "contacto": "645564906",
      "morada": "R Sarmento Pimentel 93 2830-048 BARREIRO",
      "datacriacao": "2022-07-17T22:12:55.544Z",
      "imagem": null,
      "primeirologin": true,
      "Roles": [
         {
            "IDRole": 1,
            "name": "user"
         }
      ]
   }

错误信息 #

Uncaught TypeError: Cannot read properties of undefined (reading '0')

问题原因及解决办法 #

原因1：初始状态类型不匹配 #

你初始化dataUtilizador为数组[]，但后端返回的是一个对象。数组没有Roles属性，所以首次渲染时dataUtilizador.Roles是undefined，尝试访问undefined[0]就会触发报错。而本地JSON是直接加载的对象，自然能正常访问Roles[0].name。

原因2：异步请求未完成时的渲染 #

Axios请求是异步的，组件首次渲染时，请求还没返回数据，dataUtilizador还是初始值（数组），此时访问嵌套属性会报错。

解决办法 #

1. 修正初始状态类型：把dataUtilizador的初始值改为null或空对象{}：

this.state = {
  dataUtilizador: null,
  content: ""
};

2. 添加可选链判断：在访问嵌套属性时使用可选链操作符?.，避免访问undefined的属性：

<option selected value="test"> { dataUtilizador?.Roles?.[0]?.name || '默认值' }</option>

3. 条件渲染：确保数据存在后再渲染对应的内容：

const {dataUtilizador} = this.state;   
return( 
<div className="col-md-3 mb-3">
<label>Roles</label>
<select class="custom-select" onChange={this.onChangeEstado} required>
  <option selected value="test"> { Record.Roles[0].name }</option>
  {dataUtilizador && dataUtilizador.Roles && dataUtilizador.Roles.length > 0 && (
    <option selected value="test"> { dataUtilizador.Roles[0].name }</option> 
  )}
</select>
</div>
)

内容的提问来源于stack exchange，提问作者OurozZ