0

所以我正在关注一些关于如何在 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调用的 url

4

2 回答 2

0

请用块包围你的代码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>
 }

而且您将学生设置为null，因此我们必须将其更改为：

if (!this.state.student) { 
    return <div>No student was found ...</div>
 }
于 2019-07-03T08:27:33.513 回答
0

试试这个，

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>
  )
}
于 2019-07-03T08:45:56.290 回答