如何从 ReactJS 中的完整日期时间“2019-10-17T02:00:00.000Z”

Question

我在 ReactJS(recharts) 上的图形图表上的 x 轴上显示来自 restFulAPI 的数据，但日期太长，他在图表上只显示两个日期时间，因为日期时间采用以下格式： “2019-10-17T02:00 :00.000Z"

我想剪掉这个：

T02:00:00.000Z

代码：

import React from 'react';

import Select from "react-dropdown-select";

import './aladin.css';

import { 

    Bar, 

    BarChart, 

    AreaChart, 

    Area, 

    LineChart, 

    Line, 

    XAxis,

    YAxis, 

    CartesianGrid, 

    Tooltip, 

    Legend 

} from 'recharts';

class Aladin extends React.Component {

    state = {

    }

    constructor(props) {

        super(props);

        this.state = {

          loading: true,

          dataAPI: null,

          temp: null,

          dats: null,

        }; 

      }

      async componentDidMount() {

        const url = "http://localhost:8000/?date=2019-10-20&station=41027&daysForward=2";

        const response = await fetch(url);

        let data = await response.json();

        //console.log(data.aladinModel[0][0].TA);

        this.setState({ dataAPI: data.aladinModel[0], loading: false });

        this.setState({ temp: data.aladinModel[0], loading: false });

        this.setState({ dats: data.aladinModel[0], loading: false });

        console.log(this.state.temp[1].TA);

        console.log(this.state.dats[1].DATS);

      }

 render() {

        return (

  <div className="grid-item-aladin">

                    <p><b>Температура:</b></p>

                    <LineChart width={600} height={300} data={this.state.dats}

                        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>

                        <CartesianGrid strokeDasharray="3 3" />

                        <XAxis dataKey="DATS" />

                        <YAxis />

                        <Tooltip />

                        <Legend />

                        <Line type="monotone" dataKey="TA" stroke="#8884d8" activeDot={{ r: 8 }} strokeDasharray="5 5" />  

                    </LineChart>

                </div>

     );

    }

}

export default Aladin;

Answer 1

你可以这样做：new&nbsp;Date('2019-10-17T02:00:00.000Z').toLocaleDateString();或者您也可以使用moment库并执行以下操作：moment('2019-10-17T02:00:00.000Z').format('YYYY-MM-DD');

Answer 2

您需要格式化日期。您可以通过创建一个新的数组映射 DATS 来做到这一点，如下所示：const formatedDates = DATS.map(item=>{&nbsp; &nbsp; const myDate = new Date(item);&nbsp; &nbsp; return myDate.getFullYear()+ '/' + myDate.getMonth()+1&nbsp; + '/' + myDate.getDate()})您还可以通过执行以下操作来截断字符串：const truncateDates = DATS.map(item=>{&nbsp; &nbsp; return item.substring(0, 10)})编辑：好的，然后忘记上面的代码......如果我理解你的代码，输入数据是this.state.dats。X 轴使用 DATS 键，Y 轴使用 TA。用这个替换你的代码，它会起作用。import React from 'react';import Select from 'react-dropdown-select';import './aladin.css';import {&nbsp; Bar,&nbsp; BarChart,&nbsp; AreaChart,&nbsp; Area,&nbsp; LineChart,&nbsp; Line,&nbsp; XAxis,&nbsp; YAxis,&nbsp; CartesianGrid,&nbsp; Tooltip,&nbsp; Legend} from 'recharts';class Aladin extends React.Component {&nbsp; state = {};&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; loading: true,&nbsp; &nbsp; &nbsp; dataAPI: null,&nbsp; &nbsp; &nbsp; temp: null,&nbsp; &nbsp; &nbsp; dats: null&nbsp; &nbsp; };&nbsp; }&nbsp; async componentDidMount() {&nbsp; &nbsp; const url =&nbsp; &nbsp; &nbsp; 'http://localhost:8000/?date=2019-10-20&station=41027&daysForward=2';&nbsp; &nbsp; const response = await fetch(url);&nbsp; &nbsp; let data = await response.json();&nbsp; &nbsp; //console.log(data.aladinModel[0][0].TA);&nbsp; &nbsp; this.setState({ dataAPI: data.aladinModel[0], loading: false });&nbsp; &nbsp; this.setState({ temp: data.aladinModel[0], loading: false });&nbsp; &nbsp; this.setState({ dats: data.aladinModel[0], loading: false });&nbsp; &nbsp; console.log(this.state.temp[1].TA);&nbsp; &nbsp; console.log(this.state.dats[1].DATS);&nbsp; }&nbsp; render() {&nbsp; &nbsp; const inputData = this.state.dats.map(item => {&nbsp; &nbsp; &nbsp; return { TA: item.TA, DATS: item.DATS.substring(0, 10) };&nbsp; &nbsp; });&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="grid-item-aladin">&nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <b>Температура:</b>&nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; <LineChart&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width={600}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height={300}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data={inputData}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin={{ top: 5, right: 30, left: 20, bottom: 5 }}&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <CartesianGrid strokeDasharray="3 3" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <XAxis dataKey="DATS" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <YAxis />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Tooltip />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Legend />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Line&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="monotone"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataKey="TA"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stroke="#8884d8"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; activeDot={{ r: 8 }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; strokeDasharray="5 5"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; </LineChart>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}export default Aladin;

Answer 3

也许你可以使用正则表达式来匹配date.match(/(.*)T/)[1]