我正在尝试访问数据数组的嵌套对象。它正在工作，突然之间，它开始返回"类型错误：无法读取未定义的属性'航空公司'"。我检查了一下，我似乎在任何地方都找不到我碰过的任何东西。
我有这些数据，当我尝试访问console.log(tempflights[0])时，数据被返回，但是当我console.log(tempFlights[0].airline)，或数组中的任何其他对象属性时，它会返回类型错误。
我还尝试将存储的数据与接收的数据进行比较，以查看是否存在匹配项。
谁能帮我找出我哪里弄错了。 注意：我对 React 和 Js 很陌生。
import logo1 from "./images/delta.png";
import img1 from "./images/w1.jpg";
export default [
{
sys: {
id: "1"
},
fields: {
from: {
destination: "London",
slug: "LHR",
},
to: {
destination: "New York",
slug: "LGA",
},
airline: {
name: "Delta",
airlineId: "DL 214",
logo:
{
fields: {
file: {
url: logo1
}
}
}
},
tripClass: "economy",
direct: true,
stopOver: {
destination: "",
slug: ""
},
minPrice: 900,
departureDate: "2020-06-05",
roundTrip: true,
returnDate: "2020-07-05",
luggageLimit: 50,
totalDuration: "6h 30m",
featured: true,
images: [
{
fields: {
file: {
url: img1
}
}
}
]
}
},
]
import React, { Component, createContext } from 'react'
import items from './data'
const DestinationContext = createContext();
// create context Provider
class DestinationProvider extends Component {
//set up state
state = {
destinations: [],
sortedDestinations: [],
featuredDestinations: [],
loading: true,
}
componentDidMount() {
let destinations = this.formatData(items)
let featuredDestinations = destinations.filter(destination =>
destination.featured === true);
this.setState({
destinations,
featuredDestinations,
sortedDestinations: destinations,
loading: false
})
}
formatData(items) {
let tempItems = items.map(item => {
let id = item.sys.id
let images = item.fields.images.map(image => image.fields.file.url);
let destination = { ...item.fields, images, id }
return destination;
})
return tempItems;
}
getFlights = (to, from, departureDate) => {
let tempFlights = [...this.state.destinations];
console.log(tempFlights[0].airline);
const flight = tempFlights.filter(flight =>
flight.to.destination.toLowerCase() === to.toLowerCase() &&
flight.from.destination.toLowerCase() === from.toLowerCase() &&
flight.departureDate >= departureDate
);
return flight;
}
render() {
return (
<DestinationContext.Provider value={{
...this.state,
getFlights: this.getFlights
}}>
{this.props.children}
</DestinationContext.Provider>
);
}
}
const DestinationConsumer = DestinationContext.Consumer;
export { DestinationProvider, DestinationConsumer, DestinationContext };错误：
类型错误： 无法读取未定义的属性"航空公司" DestinationProvider.getFlights src/context.js：52> 52 | console.log(tempFlights[0].airline(; |^ 53 |54 |常量航班 = 温度航班过滤器(航班 => 55 |查看已编译的 Flights.renders.render src/pages/Flights.js：24 21 |const { getFlights } = this.context 22 | const slug = Object.fromEntries(new URLSearchParams(this.state.slug(( 23 |常量 { 到， 从， 出发日期 } = 蛞蝞> 24 |常量航班 = 获取航班(往返、出发日期(
事实上，我仍然不知道为什么我不能从函数中访问这些对象，但我终于弄清楚为什么我的过滤器函数突然开始返回一个空数组。
我正在尝试在过滤器函数中比较这三个值，
const flights = tempFlights.filter(flight =>
flight.from.destination.toLowerCase() === from.toLowerCase() &&
flight.to.destination.toLowerCase() === to.toLowerCase() &&
flight.departureDate >= departureDate
);
但最后的比较是错误的。我应该比较flight.departureDate <= departureDate.toString()不flight.departureDate >= departureDate
你得到tempFlights[0] is undefined，因为它是未定义的(this.state.destinations是[]- 初始状态(，当你试图连接(或记录(它的时候。
但请注意，它将在一段时间后定义，即当componentDidMount执行并调用setState时。
getFlights = (to, from, departureDate) => {
let tempFlights = [...this.state.destinations]
console.log(tempFlights[0].airline) // Error: tempFlights[0] is undefined
const flight = tempFlights.filter(
(flight) =>
flight.to.destination.toLowerCase() === to.toLowerCase() &&
flight.from.destination.toLowerCase() === from.toLowerCase() &&
flight.departureDate >= departureDate
)
return flight
}
如果像这样在构造函数中初始化状态，则不应在getFlights中看到Error: tempFlights[0] is undefined。但我认为你不能这样做，因为items不会像你在这个例子中提供的那样真正是一个固定/硬编码的值。但我认为您的状态将设置为componentDidMount并且更改将正确传播，因此如果您只是删除控制台登录getFlight应该不会再出错，因为当时它确实在尝试从未定义读取。
constructor(props) {
super(props)
let destinations = this.formatData(items)
let featuredDestinations = destinations.filter(
(destination) => destination.featured === true
)
this.state = {
destinations,
featuredDestinations,
sortedDestinations: destinations,
}
}