Не передаются props в компоненту

Question

Всем доброго дня. У меня есть данные, которые берутся из обновляемого стейта и записываются в пропсы другой компоненты на этой же странице. Вот компонента, которая принимает данные и тут же их отображает в диве на этой же странице.

<OrderDate
value={this.state.date.toDateString()}
time={this.state.time}
/>

Вот данные, которые приходят в нее.

<p>{this.props.value + ' ' + this.props.time}</p>

Все работает и отображается. После этого я нажимаю кнопку продолжить, перехожу на следующую страницу, там тоже есть див с этой же компонентой, но в ней уже значения undefined undefined. Вот как она выглядит внутри следующей страницы

<OrderDate value={this.props.date}
          time={this.props.time}/>

Что я делаю не так и почему данные не остаются?

class Order extends Component {
  constructor(props) {
    super(props);

    this.state = {
    date: new Date(),
    time: '',
    morningTime: ['10-00', '10-30', '11-00', '11-30'],
    dayTime: ['12-00', '12-30', '13-00', '13-30', '14-00', '14-30', '15-00', '15-30', '16-00', '16-30'],
    eveningTime: ['17-00', '17-30', '18-00', '18-30', '19-00', '19-30', '20-00'],
    }
  }

  onClick = (event) => {
    this.setState({time: event.target.innerText})
  };

  onChange = date => this.setState({ date });

  render() {
    return(<div>
      <Header/>
      <div className={styles.bodyContainer}>
        <Link to="/onlineRegistration/ourServices/nails">
          <p className={styles.back}>&#60; Назад</p>
        </Link>
        <h3>Расписание</h3>
      <div className={styles.calendarContainer}>
        <Calendar 
          className={styles.calendar}
          onChange={this.onChange}
          value={this.state.date}
        />
        <OrderDate
          value={this.state.date.toDateString()}
          time={this.state.time}
          address={'http://localhost:3000/orderInfoClient'}
        />
      </div>
      <div className={styles.time}>
      <div className={styles.morning}>
        <p className={styles.dayTime}>Утро</p>
        {this.state.morningTime.map((time, i) => (
        <button key={i} value={this.state.time} onClick={this.onClick}>
        {time}
        </button> 
        ))}
      </div>
      <div className={styles.day}>
        <p className={styles.dayTime}>День</p>
        {this.state.dayTime.map((time, i) => (
        <button key={i} value={this.state.time} onClick={this.onClick}>
        {time}
        </button> 
        ))}
      </div>
      <div className={styles.evening}>
        <p className={styles.dayTime}>Вечер</p>
        {this.state.eveningTime.map((time, i) => (
        <button key={i} value={this.state.time} onClick={this.onClick}>
        {time}
        </button> 
        ))}
      </div>
      </div>
      </div>
      <Footer/>)
  }
}

export default Order;
</div>

Answer 1

Вот мое решение, которое сработало. В корневом компоненте импортируем BrowserHistory

import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();
    <BrowserRouter history={history}>
      <Switch>
          <Route exact path='/' component={MainPage}/>
          <Route path='/orderInfoClient' component={OrderInfoClient}/>
          <Route path='/confirmation' component={Confirmation}/>
          <Route path='/mainPage' component={MainPage}/>
      </Switch>
    </BrowserRouter>

Затем в компоненте(в первой Order) в которой, у нас state вызываем компонент, в котором должны отображаться пропсы и передаем ему state и history.

 <OrderDate
          value={this.state.date.toDateString()}
          time={this.state.time}
          address={'/orderInfoClient'}
          history={this.props.history}
        />

Затем в компонент в который передаются пропсы(2-ая компонента OrderDate) пишем(если не нужен переход, как мне , то убираем jump и address):

  jump(address){
    this.props.history.push({
      pathname: address,
      state: {value: this.props.value, time: this.props.time}
    })
  }
<p>{this.props.value + ' ' + this.props.time}</p>

Затем в 3-ью компоненту, в которой должна отображаться 2-ая(OrderDate) пишем сразу после render перед return:

const dateValue = this.props.date || this.props.location.state.value;
const timeValue = this.props.time || this.props.location.state.time;

И в вызываемую 2-ую компоненту пишем:

<OrderDate address={'/confirmation'} value={dateValue} history={this.props.history}
           time={timeValue}/>

Надеюсь кому-нибудь это поможет, я потратил на это 5 суток.

БЛОГ НА HUSL

Не передаются props в компоненту

Ответы (1 шт):