[英]Problems with formatting date with moment.js in React
我正在使用 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;
我觉得你搞混了。 这里。 您不应该使用时间字符串来实际计算它,只需更改日期的格式,而是保留实际时刻 object 以进行进一步计算。 这样,您总是有正确的时间和日期。
我认为您在已格式化的日期上进行格式化。 您应该坚持使用 object 而不是格式化日期。
您应该仅在渲染时格式化日期。 在传递的同时,我们传递了moment
object。
例子
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
希望有帮助!!!
我认为问题是由于这个,
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")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.