Javascript 我该怎么剪；02:00:00.000Z“；“从全天开始”；2019-10-17T02:00:00.000Z“；在ReactJS中

我在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;

从“React”导入React；
从“反应下拉选择”导入选择；
导入“/aladin.css”；
导入{
酒吧，
柱状图，
面积图，
地区
线条图，
行,，
XAxis，
亚克斯，
CartesianGrid，
工具提示，
传奇
}来自‘雷查特’；
类Aladin扩展了React.Component{
状态={
}
建造师（道具）{
超级（道具）；
此.state={
加载：对，
dataAPI:null，
温度：空，
dats:null，
}; 
}
异步组件didmount（）{
常量url=”http://localhost:8000/?date=2019-10-20和车站=41027和前方天数=2”；
const response=等待获取（url）；
让data=wait response.json（）；
//console.log（data.aladinModel[0][0].TA）；
this.setState（{dataAPI:data.aladinModel[0]，load:false}）；
this.setState（{temp:data.aladinModel[0]，load:false}）；
this.setState（{dats:data.aladinModel[0]，load:false}）；
console.log（this.state.temp[1].TA）；
console.log（this.state.dats[1].dats）；
}
render（）{
返回(
аааа

);
}
}
导出默认阿拉丁；

您可以执行以下操作：

new Date('2019-10-17T02:00:00.000Z').toLocaleDateString();

或者您也可以使用

moment

库执行以下操作：

moment('2019-10-17T02:00:00.000Z').format('YYYY-MM-DD');

您可以这样做：

new Date('2019-10-17T02:00:00.000Z').toLocaleDateString();

或者您也可以使用

moment

库执行以下操作：

moment('2019-10-17T02:00:00.000Z').format('YYYY-MM-DD');

---

你需要格式化日期。您可以通过创建一个新的数组来映射DAT，如下所示：

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)
})

您还可以通过如下操作截断字符串：

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;

从“React”导入React；
从“反应下拉选择”导入选择；
导入“/aladin.css”；
进口{
酒吧，
柱状图，
面积图，
地区
线条图，
行,，
XAxis，
亚克斯，
CartesianGrid，
工具提示，
传奇
}来自‘雷查特’；
类Aladin扩展了React.Component{
状态={}；
建造师（道具）{
超级（道具）；
此.state={
加载：对，
dataAPI:null，
温度：空，
dats:null
};
}
异步组件didmount（）{
常量url=
'http://localhost:8000/?date=2019-10-20&车站=41027&前方天数=2'；
const response=等待获取（url）；
让data=wait response.json（）；
//console.log（data.aladinModel[0][0].TA）；
this.setState（{dataAPI:data.aladinModel[0]，load:false}）；
this.setState（{temp:data.aladinModel[0]，load:false}）；
this.setState（{dats:data.aladinModel[0]，load:false}）；
console.log（this.state.temp[1].TA）；
console.log（this.state.dats[1].dats）；
}
render（）{
const inputData=this.state.dats.map（项=>{
返回{TA:item.TA，DATS:item.DATS.substring（0,10）}；
});
返回(

Температура:

);
}
}
导出默认阿拉丁；

您需要格式化日期。您可以通过创建一个新的数组来映射DAT，如下所示：

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)
})

您还可以通过如下操作截断字符串：

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;

从“React”导入React；
从“反应下拉选择”导入选择；
导入“/aladin.css”；
进口{
酒吧，
柱状图，
面积图，
地区
线条图，
行,，
XAxis，
亚克斯，
CartesianGrid，
工具提示，
传奇
}来自‘雷查特’；
类Aladin扩展了React.Component{
状态={}；
建造师（道具）{
超级（道具）；
此.state={
加载：对，
dataAPI:null，
温度：空，
dats:null
};
}
异步组件didmount（）{
常量url=
'http://localhost:8000/?date=2019-10-20&车站=41027&前方天数=2'；
const response=等待获取（url）；
让data=wait response.json（）；
//console.log（data.aladinModel[0][0].TA）；
this.setState（{dataAPI:data.aladinModel[0]，load:false}）；
this.setState（{temp:data.aladinModel[0]，load:false}）；
this.setState（{dats:data.aladinModel[0]，load:false}）；
console.log（this.state.temp[1].TA）；
console.log（this.state.dats[1].dats）；
}
render（）{
const inputData=this.state.dats.map（项=>{
返回{TA:item.TA，DATS:item.DATS.substring（0,10）}；
});
返回(

Температура:

);
}
}
导出默认阿拉丁；

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

date.match（/（*）T/）[1]

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

date.match（/（*）T/）[1]

只是

拆分（“T”）[0]

？或者做其他简单的字符串操作来达到同样的效果。只是

split（“T”）[0]

？或者执行其他相同效果的普通字符串操作。

split（“T”）[0]

suggestion更好

split（“T”）[0]

suggestion更好