未处理的拒绝（TypeError）：无法读取未定义的属性“0”

Question

所以我正在关注一些关于如何在 react 中获取 api 的教程，并且我正在使用 async 来执行此操作，但是我收到以下错误，即 0 的属性未定义

未处理的拒绝（TypeError）：无法读取未定义的属性“0”

下面是我的代码，让我知道哪里出错了

import React from 'react';
import './App.css';

class GetStudents extends React.Component {
state = {
  loading:true,
  student:null
}

async componentDidMount() {
  const url = "http://localhost:3200/students";
  const response = await fetch(url);
  const data = await response.json();
  this.setState({student:data.results[0], loading:false});


}
render() {
  if (this.state.loading) {
    return <div>loading ...</div>
  }

  if (this.state.student) {
    return <div>No student was found ...</div>
  }
   return(
     <div>
         <div>{this.state.student._id}</div>
         <div>{this.state.student.role_num}</div>
         <div>{this.state.student.first_name}</div>
         <div>{this.state.student.last_name}</div>
         <div>{this.state.student.marks}</div>
     </div>
   )


}

}
export default GetStudents;

好的，所以我不再存在那个错误，但知道我有这个错误 无法读取未定义的属性“_id” 这是我试图从http://localhost:3200/students调用的网址

Answer 1

试试this，

async componentDidMount() {
  const url = "http://localhost:3200/students";
  await fetch(url)
  .then((response) => {
    return response.json();
  })
  .then((myJson) => {
    console.log(JSON.stringify(myJson));
    //First check what type of data you are getting here and then try to set your state as below.
    //this.setState({student:data.results[0], loading:false});
  })
  .catch(error => console.error(error)); //If error occurs you will get here
}

更新

在上面的获取函数中设置状态，您使用console.log您的数据，

this.setState({student:myJson, loading:false});

然后在渲染函数中你可以迭代你的状态变量，

render() {
  if (this.state.loading) {
    return <div>loading ...</div>
  }

  if (this.state.student===null) {
     return <div>No student was found ...</div>
  }
  return(
     <div>
     {
      this.state.student.map((student)=>{
       return <> //React Fragment short syntax.
        <div>{student._id}</div>
        <div>{student.role_num}</div>
        <div>{student.first_name}</div>
        <div>{student.last_name}</div>
        <div>{student.marks}</div>
        </>
     })
    }
   </div>
  )
}

Answer 2

请用try{...} catch{} 块包围你的代码，这样如果发生不好的事情你可以看到错误。我认为你的 if 是错误的，所以我修复它

import React from 'react';
import './App.css';

class GetStudents extends React.Component {
state = {
  loading:true,
  student:null
}

async componentDidMount() {
 try{
  const url = "http://localhost:3200/students";
  const response = await fetch(url);
  const data = await response.json();
  this.setState({student:data.results[0], loading:false});
}
 catch(err){
  console.log(err)
}

}
render() {
  if (this.state.loading) {
    return <div>loading ...</div>
  }

  if (!this.state.student) { 
    return <div>No student was found ...</div>
  }
   return(
     <div>
         <div>{this.state.student._id}</div>
         <div>{this.state.student.role_num}</div>
         <div>{this.state.student.first_name}</div>
         <div>{this.state.student.last_name}</div>
         <div>{this.state.student.marks}</div>
     </div>
   )


}

}
export default GetStudents;

给你写

if (this.state.student) { 
    return <div>No student was found ...</div>
 }

而且你将 student 设置为 null，所以我们必须将其更改为：

if (!this.state.student) { 
    return <div>No student was found ...</div>
 }