文章摘要
这篇文章介绍了如何使用React、Axios和Moment.js开发一个时间戳转换组件。组件名为Time，用于将时间戳格式的数据转换为标准的时间格式。在`getData`方法中，组件通过调用Axios接口获取数据，并在成功响应和错误响应中进行处理。成功时，组件将响应数据设置为状态，并生成时间表显示开始时间和结束时间。整个组件还包含一个按钮，用于触发时间转换功能，以及一个简单的HTML界面供用户查看结果。
import React from ‘react’;
import axios from ‘axios’;
import moment from ‘moment’;
class Time extends React.Component {
//构造函数
constructor() {
super();
//react定义数据
this.state={
list: []
}
}
//请求接口的方法
getData=()=> {
var api=’http://localhost:3004/users’;
axios.get(api)
.then((response)=> {
// handle success
console.log(response.data);
//用到this需要注意指向，箭头函数
this.setState({
list: response.data
})
})
.catch(function (error) {
// handle error
console.log(error);
});
}
render() {
return (
<div>
<h2>时间戳转化为时间</h2>
<button onClick={this.getData}>获取时间</button>
<ul>
{
this.state.list.map((value, key)=> {
let start=moment(parseInt(value.startTime)).format(‘YYYY/MM/DD hh:mm:ss’);
let end=moment(parseInt(value.endTime)).format(‘YYYY/MM/DD hh:mm:ss’);
return (
<li key={key}>
<span>开始时间：{start}</span>
<span>结束时间：{end}</span>
</li>
)
})
}
</ul>
</div>
)
}
}
export default Time;