时间戳

首页 > 解决方案 > 在反应中使用开放时间的对象映射数组

javascript - 在反应中使用开放时间的对象映射数组

问题描述

所以我试图在 jsx 中呈现一个开放时间为 7 天的列表，从我的 json 文件中获取数据。我想让它看起来像这样：

周一 09:00 - 21:00

周二 09:00 - 21:00

周三 09:00 - 21:00

周四 09:00 - 21:00

周五 09:00 - 21:00

周六 11:00 - 21:00

周日 11:00 - 21:00

在我的 json 文件中，它看起来像这样：

openHours: [
          { days: [1, 2, 3, 4, 5], from: '09:00', to: '21:00' },
          { days: [6, 0], from: '11:00', to: '21:00' },
        ],

所以我尝试映射 openHours，得到 2 个对象，但是当我尝试映射这 2 个对象时，我得到错误，即 map 不是函数。我希望它以这种方式映射，在这种情况下，它返回 09:00-21:00 的 5 个项目和 11:00-21:00 的 2 个项目，但可能存在 openHours 将包含 3 个对象的情况，比如第1-5天，第6天和第0天。有什么办法吗？

标签： javascriptarraysjsonreactjs

解决方案

您应该能够迭代openHours，然后在该循​​环中迭代days。

function App() {
  const DAY_LOOKUP = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

  const openHours = [
    { days: [1, 2, 3, 4, 5], from: '09:00', to: '21:00' },
    { days: [6, 0], from: '11:00', to: '21:00' },
  ]
  
  return openHours.map(group => {
    return group.days.map(day => (
      <p key={day}>{DAY_LOOKUP[day]} {group.from} - {group.to}</p>
    ))
  })
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
);
<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="react"></div>

推荐阅读