如何从 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 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=>{

    const myDate = new Date(item);

    return myDate.getFullYear()+ '/' + myDate.getMonth()+1  + '/' + myDate.getDate()

})

您还可以通过执行以下操作来截断字符串：

const truncateDates = DATS.map(item=>{

    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 {

  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() {

    const inputData = this.state.dats.map(item => {

      return { TA: item.TA, DATS: item.DATS.substring(0, 10) };

    });

    return (

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

        <p>

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

        </p>

        <LineChart

          width={600}

          height={300}

          data={inputData}

          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 3

也许你可以使用正则表达式来匹配

date.match(/(.*)T/)[1]