使用 map 方法从 Json 中获取格式为 dd.mm.yyyy 的相应日期

Get the respective date in the format dd.mm.yyyy from a Json using the map method

我有问题。我在里面有一个 json,这是一个格式为 dd.mm.yyyy 的字符串。我想在每个月的循环中输出一次,只有一天,一天和一个月以及完整的日期。 不幸的是,如果我像现在这样写的话。我得到 1527 显示。

如何循环返回日、月和完整日期?

// import React, { useState, useEffect } from 'react'

function Test() {
  const days = [
    "Januar",
    "Februar",
    "März",
    "April",
    "Mai",
    "Juni",
    "Juli",
    "August",
    "September",
    "Oktober",
    "November",
    "Dezember",
  ];
  const matchDays = [
    { date: new Date('12.05.2022') },
    { date: new Date('01.06.2027') },
  ];
  return (
    <div>
      {
        days &&
        <ul class="days">
          {
            days.map((d, i) =>
              <li>
                { d }
                <span class="dates">
                  {
                    matchDays.map((d, i) =>
                      <span class="date"> { d.date.getDate() } </span>
                    )
                  } 
                </span>
              </li>
            )
          }
        </ul>
      }
    </div>
  );
}

// export default Test
ReactDOM.render(<Test/>, document.querySelector("#test"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="test"></div>

期望的输出

12 
12.05
12.05.2022
01
01.06
01.06.2027

您可以简单地遍历 matchDays 并在每个部分渲染 3 个元素:

  return (
    <ul>
      {matchDays.map((day) => (
        <>
          <li>{day.date.getDate()}</li>
          <li>
            {day.date.getDate()}.{day.date.getMonth() + 1}
          </li>
          <li>
            {day.date.getDate()}.{day.date.getMonth() + 1}.{day.date.getFullYear()}
          </li>
        </>
      ))}
    </ul>
  );

每个 <li> 包含日、日 & 月或日 & 月 & 年。请注意,我在这里使用 <li> 作为示例 - 选择您在应用中需要的内容。

结果:

  • 1
  • 1.10
  • 1.10.2002
  • 5
  • 5.11
  • 5.11.2022
  • 27
  • 27.1
  • 27.1.2022

编辑:固定月份 +1 以避免基于 0 的值。

根据我上面的评论...

"1/2 ... a good approach which mostly works is to take a step back and separate the data transformation process (e.g. filtering / mapping / reducing ) from UI related ones. One gets a more clear view at the problem due to e.g. faster iteration based on better testing possibilities (here unit tests for the data layer)."

"3/3 ... regarding the output ... since each date apparently should just be rendered twice partially and once in its German locale string form why does the OP not provide the date directly as string and just splits it like e.g. ... '12.05.2022'.split(''.)?"

因此,每个简化的 date-item 来自数组,如 ...

const matchDays = [
  { date: '12.05.2022' },
  { date: '01.06.2027' },
];

... 将会 mapped into an array of date parts based on simply splitting and partially rejoin 它。

const matchDays = [
  { date: '12.05.2022' },
  { date: '01.06.2027' },
];

const renderData = matchDays
  .map(({ date }) => {
    const [day, month] = date.split('.');

    return [day, [day, month].join('.'), date];
  });

console.log({ renderData });
.as-console-wrapper { min-height: 100%!important; top: 0; }

基于上述示例代码,第二个重构步骤会将纯数据映射更改为组合 data/UI 渲染任务。

// import React, { useState, useEffect } from 'react'

function Test() {
  const matchDays = [
    { date: '12.05.2022' },
    { date: '01.06.2027' },
  ];
  return (
    <ul class="date-items">
      {
        matchDays.map(({ date }) => {
          const [day, month] = date.split('.');
          return (
            <li>
              <ul class="date-partials">
                <li>{ day }</li>
                <li>{ [day, month].join('.') }</li>
                <li>{ date }</li>
              </ul>
            </li>
          )
        })
      }
    </ul>
  );
}

// export default Test
ReactDOM.render(<Test/>, document.querySelector("#test"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="test"></div>