如何修复React中的“类型错误：当试图访问对象的属性时，无法读取未定义的属性'name'”

Question

在使用fetch调用中的promise更新组件的状态后，我无法访问对象的属性。当我console.log对象时，我看到它，但当我试图访问属性时，它抛出一个类型错误：不能读取未定义的属性'name'。我尝试了console.log（object.keys（filteredstudents[0]))，得到：typeError：不能将undefined或null转换为object类App extends react.component{constructor（prop）{super（prop）this.state={searchfield:'',students:[],menu：'home'}}

  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'

Answer 1

您正在尝试在promise有机会解析和状态更新之前访问fiteredStudents数组中的项。如果您将逻辑包装在条件的内部，即。

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

那就该管用了。