我如何在ReactJS中从完整的DateTime“ 2019-10-17T02：00：00.000Z”中剪切“ 02：00：00.000Z”

Question

我在ReactJS（recharts）的图形图表上的x轴上显示来自restFulAPI的数据，但是Dates太长，并且他在图形上仅显示了两个datetime，因为datetime格式如下：     “ 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]