如何在JavaScript中修复"TypeError:无法读取未定义的属性'map‘“？
如何在JavaScript中修复"TypeError:无法读取未定义的属性'map‘“？
提问于 2019-06-23 23:35:04
我从API中获取数据，然后将其映射到一个表中。但是，当页面加载时，获取不起作用，并且状态保持未定义。尽管API工作正常且数据发送正常，但我在Postman和我的浏览器上都进行了检查。如何解决这个问题？
页面崩溃了，我用谷歌搜索了一下，并添加了条件渲染来阻止它崩溃。但是仍然不能解决获取数据和映射数据的问题。
下面是不起作用的页面的代码：
import React, { Component } from "react";
import fetch from "isomorphic-unfetch";
export default class extends Component {
static async getInitialProps() {
const res = await fetch("https://linktoapi/path");
const studentData = await res.json();
return studentData;
}
componentWillMount() {
this.setState({
studentData: this.props.studentData
});
}
render() {
return (
<table className="table is-striped is-fullwidth has-text-centered">
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Section</th>
<th>Batch</th>
<th>Contact No.</th>
</tr>
</thead>
<tbody>
{this.state.studentData && this.state.studentData.map(studentDataRow => (
<tr id={studentDataRow._id}>
<td>{studentDataRow.name}</td>
<td>{studentDataRow.class}</td>
<td>{studentDataRow.section}</td>
<td>{studentDataRow.batch}</td>
<td>{studentDataRow.contact_no}</td>
</tr>
))}
</tbody>
</table>
);
}
}以下是来自API的数据：
[{"_id":"5d0cd67416c3a60017608a48","type":"student","name":"Samnan","contact_no":"9999","class":"123","section":"av","batch":"2002","__v":0},
{"_id":"5d0d1a7bfe72ac001775d778","type":"student","name":"as","contact_no":"0","class":"d","section":"r","batch":"a","__v":0},
{"_id":"5d0d1b24fe72ac001775d779","type":"student","name":"ab","contact_no":"0","class":"d","section":"afrgr","batch":"adsda","__v":0},
{"_id":"5d0d1b58259c5d6cd69acf3b","type":"student","name":"akash","contact_no":"567","class":"23","section":"h","batch":"2012","__v":0},
{"_id":"5d0ea1eb91eac20017f36739","type":"student","name":"as","contact_no":"08109209","class":"v","section":"qere","batch":"re","__v":0}]要在本地复制此问题，请执行以下操作：
git clone https://github.com/Geektrovert/EduSys.git && cd EduSys
npm i
npm run dev回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-24 00:05:15
为了让它运行，我做了一些改动。getInitialProps似乎没有被调用。我在componentDidMount中移动了您的应用程序接口调用，并使用状态来存储学生数据。
import React, { Component } from "react";
import fetch from "isomorphic-unfetch";
export default class extends Component {
constructor(props) {
super(props);
this.state = {
studentData: []
};
}
async componentDidMount() {
const res = await fetch("https://edusys-yas.herokuapp.com/api/students");
const studentData = await res.json();
this.setState({ studentData });
}
render() {
return (
<table className="table is-striped is-narrow is-fullwidth">
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Section</th>
<th>Batch</th>
<th>Contact No.</th>
</tr>
</thead>
<tbody>
{this.state.studentData.map(studentDataRow => (
<tr>
<td>{studentDataRow.name}</td>
<td>{studentDataRow.class}</td>
<td>{studentDataRow.section}</td>
<td>{studentDataRow.batch}</td>
<td>{studentDataRow.contact_no}</td>
</tr>
))}
</tbody>
</table>
);
}
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56725377
复制相关文章
相似问题