0

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

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

1 ответ 1

0

Вот мое решение, которое сработало. В корневом компоненте импортируем 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 суток.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.