在 React 中使用 moment.js 格式化日期的问题

Question

我正在使用 Open Weather Map API 在 React 中创建天气应用程序，如您所知，API 为我们提供了 5 天/3 小时预报的数据。此外，由于 API 默认使用 GMT Unix 时间戳格式，我决定将其格式化为“MM-DD-YYYY”以便轻松处理日期。但问题是当我尝试在 moment.js 中进一步将“MM-DD-YYYY”转换为 LT 格式时，我丢失了 date 中的时间日期，默认情况下所有时间都为 12:00 AM。如果我们尝试将原始 GMT Unix 时间戳格式转换为“MM-DD-YYYY”，然后将“MM-DD-YYYY”进一步转换为“LT”，我们是否会丢失 GMT Unix 时间戳中的时间？

import React, { Fragment, Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import SearchBox from "./Containers/SearchBox/SearchBox";
import Header from "./Components/Header/Header";
import styles from "./App.module.css";
import CardContainer from "./Containers/CardContainer/CardContainer";
import Footer from "./Components/Footer/Footer";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import About from "./Components/About/About";
import axios from "axios";
import WeatherDay from "./Components/WeatherDay/WeatherDay";
class App extends Component {
  state = {
    title: null
  };

  getTitle = location => {
    axios
      .get(
        `http://api.openweathermap.org/data/2.5/forecast?q=${location}&APPID=7ad09d078633b652ecef8587a337639e&units=metric`
      )
      .then(res => {
        this.setState({
          title: res
        });
      })
      .catch(err => {
        console.log(err);
      });
  };

  render() {
    return (
      <Router>
        <div className={styles.App}>
          <Fragment>
            <Header title={"Weather App"} />
            <Switch>
              <Route
                path="/"
                exact
                render={props => (
                  <Fragment>
                    <div className="container">
                      <SearchBox getRequest={this.getTitle} />
                    </div>
                    <main className={styles.mainContent}>
                      <h1 className={styles.cityWeather}>
                        {this.state.title && this.state.title.data.city.name}
                      </h1>
                      <CardContainer
                        weatherData={
                          this.state.title && this.state.title.data.list
                        }
                      />
                    </main>
                  </Fragment>
                )}
              />

              <Route path="/about" component={About} />
              <Route
                path="/day/:date"
                render={props => (
                  <WeatherDay {...props} title={this.state.title} />
                )}
              />
            </Switch>
            <Footer copyright={"Copyright 2018"} />
          </Fragment>
        </div>
      </Router>
    );
  }
}

export default App;


import React from "react";
import "./WeatherDay.module.css";
import moment from "moment";
const WeatherDay = props => { // This is the component where I have a problem with conversion
  const allDays =
    props.title &&
    props.title.data.list.map(item => ({
      date: moment(new Date(item.dt_txt)).format("MM-DD-YYYY"),
      main: item.main,
      weather: item.weather
    }));
  const chosenDate = props.match.params.date;

  const day =
    props.title &&
    allDays.filter((item, index) => {
      return item.date === chosenDate;
    });

  const mir =
    props.title &&
    day.map(item => { //Here I am trying to convert "MM/DD/YYYY" into "LT" and lose time info
      return <p>{moment(new Date(item.date)).format("LT")}</p>;
    });

  return (
    <div className="row">
      <div className="col-md-2"></div>
      {mir}
            </div>
          );
        })}
    </div>
  );
};

export default WeatherDay;

Answer 1

我觉得你搞错了。这里。您不应该使用时间字符串来实际计算它，只更改日期的格式，但保留实际的时刻对象以供进一步计算。这样您总能找到正确的时间和日期。

Answer 2

我认为问题是由于这个，

date: moment(new Date(item.dt_txt)).format("MM-DD-YYYY")

当您按上述方式转换日期时，它会从中剔除时间并得到简单的日期。

应该是这样的，

date: moment(new Date(item.dt_txt)).format("MM-DD-YYYY, h:mm:ss a")

Demo

Answer 3

我认为您在已格式化的日期上进行格式化。您应该维持时刻对象而不是格式化日期。

您应该仅在渲染时格式化日期。在传递时，我们传递moment 对象。

例子

let parsed = moment(new Date())
let format1 = parsed.format('MM-DD-YYYY')
let format2 = parsed.format('LT')
console.log(format1) // 09-20-2019
console.log(format2) // 3:43 PM

希望对你有帮助！！！