[英]I am trying to map mydata from the database but i am getting this error. TypeError: Cannot read property 'map' of undefined
I am trying to map my data from the database but I am getting this error.我正在尝试从数据库中 map 我的数据,但我收到此错误。 FYI my API is working I checked it on postman
仅供参考,我的 API 正在工作我在 postman 上检查过
import React from "react";
export default class Dashboard extends React.Component {
state = {
people: [],
};
async componentDidMount() {
const url = "http://localhost:5000/dashboard/getuser";
const response = await fetch(url);
const data = await response.json();
console.log(data);
this.setState({ people: data.results });
}
render() {
//const peopleJSX = [];
//this.state.people.forEach((person) => {
//peopleJSX.push(
//<div key={person.id}>
//<div>{person.firstname}</div>
//<div>{person.lasttname}</div>
//</div>
//);
//});
return (
<div>
{this.state.people.map((person) => (
<div key={person.id}>
<div>{person.firstname}</div>
<div>{person.lasttname}</div>
</div>
))}
</div>
);
}
}
This is the error that I am getting back: TypeError: Cannot read property 'map' of undefined这是我回来的错误: TypeError: Cannot read property 'map' of undefined
probably because your data is not ready yet when it's rendering可能是因为你的数据在渲染时还没有准备好
<div>
{this.state.people.length > 0 && this.state.people.map((person) => (
<div key={person.id}>
<div>{person.firstname}</div>
<div>{person.lasttname}</div>
</div>
))}
Ryan Adhi's answer is probably what you are looking for, also you could make const inside render ie const people = this.state.people;
Ryan Adhi 的答案可能是您正在寻找的,您也可以在渲染中制作 const 即
const people = this.state.people;
which in my experience does better job than calling state inside return根据我的经验,这比在 return 中调用 state 做得更好
In your case, it may be two possibilities because the error "Cannot read property 'map' of undefined" means that the object your are trying to map is not an array.在您的情况下,可能有两种可能性,因为错误“无法读取未定义的属性'map'”意味着您尝试的 object 不是数组。
That means it is either:这意味着它是:
The result fetched from the endpoint is returning an undefined value.从端点获取的结果返回一个未定义的值。
The property "people" inside the State doesn't exist. State 中的属性“人”不存在。
The latter is probably not the case, since your declarations seems correct, so what I recommend is checking the console.log(data.results)
and seeing if it is not undefined.后者可能不是这样,因为您的声明似乎正确,所以我建议检查
console.log(data.results)
并查看它是否未定义。
You do not need to check the length of the object if you can assure it will always be an array.如果您可以确保它始终是一个数组,则无需检查 object 的长度。 Even with 0 length, map will work properly (and do nothing, obviously).
即使长度为 0,map 也会正常工作(显然什么也不做)。 If you can't assure it will always be an array (maybe it will be
null
at some point, then do this:如果你不能保证它总是一个数组(也许它会在某个时候是
null
,然后这样做:
render () {
return (
<div>
{
this.state.people && this.state.people.map(person => (
<div key={person.id}>
<div>{person.firstname}</div>
<div>{person.lasttname}</div>
</div>
))
}
</div>
);
}
This will short circuit if this.state.people
is falsey (null, false, undefined, 0, etc...)如果
this.state.people
是假的(空、假、未定义、0等),这将短路
But again, I'm betting that data.results is undefined for some reason (maybe the correct property is data. result ? I don't know...)但同样,我打赌 data.results 由于某种原因未定义(也许正确的属性是data.result ?我不知道......)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.