Как бы я передал свою конвертированную дату с меткой api в компонент? - PullRequest
Новая
       13

Как бы я передал свою конвертированную дату с меткой api в компонент?

0 голосов
/ 09 февраля 2020

Я только что нашел какое-то решение для преобразования метки времени. Но в моем случае, как бы я передал конвертированную дату в мой ответ объекта JSON на странице?

Рассмотрим код ниже: 

componentDidMount(){
        const loginEmail = localStorage.getItem('loginEmail');
        this.setState({loginEmail})
        console.log(loginEmail)
         fetch(`http://localhost:9000/api/event/view/${loginEmail}`,)
         .then((resp)=>{
           resp.json().then((res)=>{
             console.log(res.data.event_info);
             this.setState({data: res.data});
            console.log("Start Date: " + new Intl.DateTimeFormat('en-US').format(res.data.event_info.start_date))
           })
         })

       }

Я получаю результат Дата начала: 2/19/2019 с консоли. Но как мне передать эту дату начала моему компоненту? 

<div className="container">
   {
                  Object.keys(data).map((key) => 
                      <div className="user-detail">
                          <h1>Event Name:</h1>
                          <p> { data[key].event_name }</p>
                          <h1>Event Email:</h1>
                          <p>{ data[key].event_email }</p>
                          <h1>Event Description:</h1>
                          <p>{ data[key].event_description }</p>
                          <h1>Event Type:</h1>
                          <p>
                              { data[key].event_type }
                            </p>
                          <h1>Event Start Date:</h1>
                          <p>{ data[key].start_date }</p>
                          <h1>Event End Date:</h1>
                          <p>{ data[key].end_date }</p>
                      </div>
                  )
    }  
</div>

1 Ответ

3 голосов
/ 09 февраля 2020

Опция 1: форматирование непосредственно при рендеринге

Вместо <p>{ data[key].start_date }</p>
запись <p>{new Intl.DateTimeFormat('en-US').format(data[key].start_date)}</p>.

В функции рендеринга вы можете написать JavaScript, чтобы вы могли отформатировать дата там, как вы делаете в вашем console.log.

Более чистым подходом было бы использование метода formatDate в вашем компоненте класса React, 

// This can even be a global helper function, it doesn't use any class variables
formatDate(timestamp) {
   return new Intl.DateTimeFormat('en-US').format(timestamp);
}

render() {
   ...
   <p>{ this.formatDate(data[key].start_date) }</p>
   ...
}

Вариант 2: Сохранить отформатированную дату в state

Вы также можете сохранить правильный формат в состоянии, как только получите данные. Вместо this.setState({data: res.data}): 

this.setState({
   data: res.data,
   formattedStartDate: new Intl.DateTimeFormat('en-US').format(res.data.event_info.start_date)
});

И затем в вашей функции рендеринга используйте, например, <p>{ this.state.formattedStartDate }</p>.

Сохранение отформатированной даты в состоянии более эффективно, потому что если ваш компонент повторно отрисовывается без изменения состояния, вместо форматирования снова будет использоваться уже отформатированная строка даты.

Обратите внимание, что если у вас есть данные для нескольких событий (я вижу, вы делаете карту по ключам в данных), вы следует хранить отформатированные даты для всех событий. В этом примере рассматривается только тот случай, когда у вас есть только одна отформатированная дата, которую вы хотите сохранить.

Вариант 3: Извлечь логи форматирования c в компонент React

Это может быть слишком много для такого простого случая, но вы могли бы иметь компонент с именем <FormattedDate />, который получает метку времени в качестве реквизита и отформатирует время. 

<div className="user-detail">
  ...
  <FormattedDate timestamp={data[key].start_date} />
  ...
</div>

Преимущество этого подхода состоит в том, что вы можете использовать его в другие части вашего приложения, а затем, если вы когда-нибудь решите каким-либо образом стилизовать даты или изменить форматирование, вам просто нужно изменить этот один компонент, и он будет обновляться везде.

При создании <FormattedDate /> компонент, вы должны сделать его PureComponent , поэтому он будет перерисовываться только при изменении временной метки. Таким образом, вы можете безопасно использовать Option # 1 и просто отформатировать дату внутри функции рендеринга, и если метка времени не изменится, не будет никаких бесполезных вычислений.

...