在 React 中创建可重用的日期格式化程序

Question

我一直在努力创建一个可重用的函数，我可以调用我的数据中的日期。目标是获取任何给定的日期，确定它是否只有一个日期，或者日期和时间，然后 return 数据以适当的格式。

我一直在使用 moment 来格式化东西，但我不确定如何在数据上实际调用这个函数。我是 React 的新手

这是我目前得到的：


    import moment from "moment";
    
    const FormatDate = (dateObject) => {
      var dateMutant = dateObject;
      var dateMutated = "";
    
      function justDate() {
        //formats just a date
        dateMutated = moment.utc(dateMutant).format("MM-DD-YYYY");
      }
    
      function dateTime() {
        //formats a date and time
        dateMutated = moment.utc(dateMutant).format("MM-DD-YYYY hh:mm:a");
      }
      console.log(dateMutated);
      return dateMutated;
    };
    export default FormatDate

我试图在这样的页面中调用它：

  React.useEffect(() => {
    var testDate = '';
    if (allCommentsFetch) {
      setAllCommentsLoading(true);
      axios
        .get(`###API Hook##`)
        .then(response => {
          let comments = response.data;
          comments.forEach(commentfield => {
            if (commentfield != null) {
              commentfield['commentTimestamp'] = moment.utc(commentfield.commentTimestamp).format('YYYY-MM-DD hh:mm:ss');
              testDate = FormatDate(commentfield.commentTimestamp).justDate();
            } else {
              comments[commentfield] = 'N/A'
            }
          })

但是我得到一个错误，指出 Object(...)(...).justDate 不是一个函数。

Answer 1

你可以写得更好更简洁，首先，你的模块名不必用PascalCase，getFormattedName会是更好的选择！第二件事是您正在使用 var...避免使用它。

您在 format 函数中唯一需要更改的是格式模板...而且我看到您只有两个选项（justDate 和 dateTime）这种情况，我们再写一遍：

const getFormattedDate = ({ dateObject, includeTime }) => {
  const dateFormat = includeTime ? 'MM-DD-YYYY hh:mm:a' : 'MM-DD-YYYY';
  return moment.utc(dateObject).format(dateFormat);
};

关于您遇到的错误：(but am getting an error that Object(...)(...).justDate is not a function) 问题是您没有从 FormatDate 函数中 return justDate。

在 React 中创建可重用的日期格式化程序

Creating a reusable date formatter in React

momentjs

reactjs