我创建了一个简单的预订应用程序,其中包含 3 个文件、App.js
(Booked.js
第一个孩子)和Details.js
(第二个孩子)
我正在尝试App.js
使用第二个孩子()访问以删除数据,Detail.js
但我无法继续,因为它会抛出一个错误
“TypeError:无法读取未定义的属性‘状态’”
每当我尝试向路由组件添加功能以访问App.js
这是主页
https://i.stack.imgur.com/4PrM8.png
当我单击 Booked.js 中的数据时,我被重定向到 Details.js 以查看特定数据https://i.stack .imgur.com/H2EnL.png
使用此代码,带有组件的 Route 可以工作
<Route path="/details" component={Details} />
但是添加一个函数后给我一个错误
<Route path="/details" component={ () => <Details delBook={this.delBook} /> } />
或者
<Route path="/details" render={()=><Details delBook={this.delBook}/>}/>
Booking.js 中的链接
<Link
to={{
pathname: "/details",
state: {
id: booking.id,
fname: booking.fname,
lname: booking.lname,
email: booking.email,
ddate: booking.ddate,
ttime: booking.ttime
}
}}
key={booking.id}
style={linkStyle}>
在引发错误的 Details.js 中。
state = {
id: this.props.location.state.id,
fname: this.props.location.state.fname,
lname: this.props.location.state.lname,
email: this.props.location.state.email,
ddate: this.props.location.state.ddate,
ttime: this.props.location.state.ttime,
}
有人可以帮助解释为什么会这样吗?任何解决方案或替代方案?蒂亚!