使用map方法從Json獲取格式為dd.mm.yyyy的相應日期

我有個問題。我在里面有一個 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

uj5u.com熱心網友回復：

從我上面的評論...

“1/2 ......一種最有效的好方法是退后一步，將資料轉換程序（例如過濾/映射/減少）與 UI 相關的程序分開。由于例如，人們可以更清楚地了解問題基于更好的測驗可能性（這里是資料層的單元測驗）更快的迭代。”

“3/3 ......關于輸出......因為每個日期顯然應該只部分呈現兩次，并且一次以其德語語言環境字串形式呈現，為什么 OP 不直接將日期作為字串提供，而只是像例如.. 。'12.05.2022'.split(''.)?”

因此，每個簡化date的 -item 都來自一個陣列，如 ...

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

... 將根據簡單的ting 和部分地對其進行mapped 到日期部分的陣列中。splitjoin

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

基于上面的示例代碼，第二個重構步驟會將純資料映射更改為組合的資料/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>

uj5u.com熱心網友回復：

您可以簡單地迭代matchDays并渲染每個部分的 3x 元素：

  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 的值。

標籤：javascript 反应 循环 日期

上一篇：C 中的dowhile回圈條件錯誤，條件是繼續回圈

下一篇：如何遍歷串列中的每個元素并遞增一