如何在表格中显示之前重新格式化日期

Question

我使用 React 和 axios 从以下位置获取数据： https://data.nasa.gov/resource/gh4g-9sfh.json

我获取 JSON 并将其作为道具传递给 ResultTable 以在 Table 中呈现数据

let formQuery =
      "https://data.nasa.gov/resource/gh4g-9sfh.json?$where=UPPER(name)like'" +
      this.convertUserInputToQuery() +
      "'";`enter code here`

    this.setState({
      loading: "loading..."
    });
    axios
      .get(formQuery)
      .then(data => {
        let searchResult = data.data;
        console.log(searchResult);
        //sets states which renders the result in the ResultTable component
        this.setState({
          searchResult: searchResult,
          loading: "search",
          pagination: { current: 1 }
        });
        console.log(this.state.pagination);
      })
      .catch(err => {
        console.log(err);
        this.setState({ searchResult: "error", loading: "search" });
      })
      .then(data => {
         this.setState({ pagination: {} });
      });
  }

我将在此处使用 Ant Design 将这个日期渲染到表格中：

import React, { Component } from "react";
import { Table } from "antd";
import "antd/dist/antd.css";

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Fall",
    dataIndex: "fall",
    key: "fall"
  },
  {
    title: "Mass",
    dataIndex: "mass",
    key: "mass"
  },
  {
    title: "Year",
    dataIndex: "year",
    key: "year"
  }
];

export class ResultTable extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div id="result-output">
        {this.props.searchResult != "error" && (
          <Table
            className="result-table"
            dataSource={this.props.searchResult}
            columns={columns}
            pagination={this.props.pagination}
          />
        )}
        {this.props.searchResult == "error"}
      </div>
    );
  }
}

并且在“年份”列中存在额外字符的问题：

Screen of a rendered Table

如何重写我获取的 JSON 文件中的所有“年份”数据？所以它在没有额外字符的情况下呈现？

Answer 1

您可以遍历结果并更改每个结果的year 字段。

axios
    .get(formQuery)
    .then(data => {
        ...
        for(let result of searchResult)
            if(result["year"]) // If result has an `year` attribute
                result["year"] = result["year"].split("T")[0] // extract "1880-01-01" from "1880-01-01T00:00:00.000"
        ...
    })

Answer 2

请看如下：

• 请创建更改日期格式的方法

formatDate = (date) => {
    const dateObject = new Date(date);
    const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November', 'December',
    ];
    const setMonth = `${monthNames[dateObject.getMonth()]}`;
    const setDay = `${dateObject.getDate()}`;
    const setYear = dateObject.getFullYear();
    const returnDate = `${setMonth} ${setDay}, ${setYear} `;
    return returnDate;
  };

• 调用从循环中获取数据的方法：

格式日期（年份）；

希望对你有帮助。

Answer 3

使用

columns[3].key = convertDate(columns[3].key);

为每一行转换您的日期：

function convertDate(inputFormat) {
  function pad(s) { return (s < 10) ? '0' + s : s; }
  var d = new Date(inputFormat)
  return [pad(d.getDate()), pad(d.getMonth()+1), d.getFullYear()].join('/')
}

console.log(convertDate(new Date()));

Answer 4

这是一种不同的方法，而不是修改数据。 在渲染前转换日期。

在年份列中，在显示之前将其转换为所需的格式。 我假设您可以选择在项目中添加一个新库（momentjs）。如果没有，您可以手动 来代替使用 momentjs 库。这样您以后可以简单地修改时区。

您可以在应用程序的各个部分使用该转换器来修改日期格式，而不是更改从后端获得的数据

这里是示例代码框链接 https://codesandbox.io/s/funny-forest-96fht

import moment from "moment-timezone";

export const timeConverter = rawDate =>
  moment(rawDate)
    .tz("America/Chicago")
    .format("MMM DD YYYY, h:mm:ss a z");

...

import { timeConverter } from "./momentTz";

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Fall",
    dataIndex: "fall",
    key: "fall"
  },
  {
    title: "Mass",
    dataIndex: "mass",
    key: "mass"
  },
  {
    title: "Year",
    dataIndex: "year",
    key: "year",
    render: year => timeConverter(year)
  }
];

手动方式

只需在现有年份列中使用渲染即可删除不需要的数据

示例https://codesandbox.io/s/vigilant-feather-9ui01

 {
    title: "Year",
    dataIndex: "year",
    key: "year",
    render: year => year.split("T")[0] 
  }