React调用Django Rest Framework数据时出现属性读取未定义错误

核心原因 #

你打印的props.user1是数组类型，数组本身没有username属性，你要访问的是数组里第一个对象的username；另外从Django Rest Framework获取数据是异步操作，组件初始渲染时user1可能还没拿到数据（是空数组/undefined），直接访问属性就会触发报错。

解决方法 #

1. 正确访问数组内的对象属性 #

因为user1是数组，要先取数组元素再访问属性，同时用可选链操作符处理初始数据未加载的情况：

console.log(props.user1[0]?.username)

2. 加条件渲染/判断 #

如果要在组件中使用这个属性，先判断数组是否有内容，避免空数组报错：

// 组件内渲染示例
return (
  <div>
    {props.user1.length > 0 && <p>{props.user1[0].username}</p>}
  </div>
)

3. 确保父组件初始状态合理 #

在父组件初始化状态时，把user1设为空数组，避免初始值为undefined：

// 父组件状态初始化
const [user1, setUser1] = useState([]);

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