ReactJS 路线 Components/Render

Question

我创建了一个包含 3 个文件的简单预订应用程序，App.js、Booked.js（第一个 child）和 Details.js（第二个 child）
我正在尝试访问 App.js 以使用第二个 child(Detail.js) 删除数据，但我无法继续，因为它会抛出

错误

"TypeError: Cannot read property 'state' of undefined"

每当我尝试向路由组件添加功能以访问 App.js

这是主页 https://i.stack.imgur.com/4PrM8.png
当我单击 Booked.js 中的数据时，我被重定向到 Details.js 以查看特定数据 https://i.stack.imgur.com/H2EnL.png

使用此代码，带有组件的路由有效

<Route path="/details" component={Details} />

但是添加函数后报错

<Route path="/details" component={ () => <Details delBook={this.delBook} /> } />

或

<Route path="/details" render={()=><Details delBook={this.delBook}/>}/>

Link 在 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,
}

有人可以帮忙解释一下为什么会这样吗？任何解决方案或替代方案？ TIA！

Answer 1

作为 prop 传递时需要绑定 this。传递路由器的道具也是一个好主意：

<Route path="/details" component={ (routerProps) => <Details delBook={this.delBook.bind(this)} {...routerProps} />  } />

同样在 Details.js 中，您应该直接使用 props，而不是 this:

class Details extends React.Component {
  constructor(props) {  // Use constructor to initialise `this` properly
    super(props);

    this.state = {
      id: props.location.state.id,
      fname: props.location.state.fname,
      lname: props.location.state.lname,
      email: props.location.state.email,
      ddate: props.location.state.ddate,
      ttime: props.location.state.ttime
    };
  }
}

ReactJS 路线 Components/Render

ReactJS Route Components/Render

javascript

reactjs

react-router

react-router-component

react-router-dom