Компоненты/рендеринг маршрута ReactJS

Я создал простое приложение бронирования с тремя файлами: App.js, Booked.js (1-й дочерний элемент) и Details.js (2-й дочерний элемент).
Я пытаюсь получить доступ к App.js, чтобы удалить данные, используя 2-й дочерний элемент (Detail.js), но не могу продолжить. потому что это выдает мне ошибку

«Ошибка типа: невозможно прочитать состояние неопределенного свойства»

Всякий раз, когда я пытаюсь добавить функцию в компонент маршрута для доступа к 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} /> } />

or

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

Может кто-нибудь помочь и объяснить, почему это происходит? Любое решение или альтернативы? ТИА!


reactjs javascript react-router-dom react-router react-router-component
person Drew Cordano    schedule 28.11.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужно связать 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
    };
  }
}
person Clarity    schedule 28.11.2019
comment
Спасибо за упоминание routerProps, которое решило мою проблему передачи переменного аргумента, как в URL /:id, компоненту, к которому вы направляетесь, а также передаче других данных в атрибутах. +1 - person Roland; 27.12.2019