如何修复 React 中的“类型错误：尝试访问对象的属性时无法读取未定义的属性名称”

Posted 2023-02-23

【中文标题】如何修复 React 中的“类型错误：尝试访问对象的属性时无法读取未定义的属性名称”

【英文标题】：How to fix 'Type Error: Cannot Read Property 'name' of undefined when trying to access properties of an object' in React

【发布时间】：2020-02-10 01:43:00

【问题描述】：

在使用来自 a 的 promise 更新组件的状态后 fetch 调用，我无法访问对象的属性。 当我控制台记录对象时，我看到了它，但是当我尝试访问时 它引发类型错误的属性：无法读取属性“名称” 的未定义。 I have tried console.log(Object.keys(filteredStudents[0])) and i get: TypeError: Cannot convert undefined or null to object 类 App 扩展 React.Component 构造函数（道具） 超级（道具） 这个.state = 搜索字段：''， 学生： []， 菜单：“家”

  componentDidMount() 

 fetch('https://jsonplaceholder.typicode.com/users')
 .then(response => 
        return response.json()
    ).then(data => 
        // console.log(data);
        this.setState(students: data)
    ).catch(err => console.log('error', err))
  

  render ()
```````````````````````````````````````````````````````````
    const filteredStudents = this.state.students
    console.log(filteredStudents[0])
    console.log(Object.keys(filteredStudents[0]))
 ````````````````````````````````````````````````````````
      );
    

    
  

I expect the output to return the value of any key I try to 
 access. e.g 
console.log(filteredStudents[0].name) -----> 'leanne'

【参考方案1】：

您正试图在承诺有机会解决之前以及您的状态更新之前访问 fiteredStudents 数组中的项目。如果您将逻辑包装在条件中，即

if(filteredStudents.length) 
    console.log(filteredStudents[0])
    console.log(Object.keys(filteredStudents[0]))

那么它应该可以工作了。