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

【问题标题】：Mapping array with objects of open hours in react在反应中使用开放时间的对象映射数组
【发布时间】：2021-01-03 18:32:26
【问题描述】：

所以我试图在 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 天。有什么办法吗？

【问题讨论】：

标签： javascript arrays json reactjs

【解决方案1】：

您应该能够迭代 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>

【讨论】：

【解决方案2】：

这样的东西应该适合你：

import React from 'react';

const App = () => {

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

  const numberToDay = (number) => {
    switch(number) {
      default: return 'Monday';
      case 1:  return 'Tuesday';
      case 2:  return 'Wednesday';
      case 3:  return 'Thursday';
      case 4:  return 'Friday';
      case 5:  return 'Saturday';
      case 6:  return 'Sunday';
    }
  };

  const rows = openingHours.map((element, index) => {
    // Iterate over the days and return their appropriate string value
    const days = element.days.map((item) => {
      return numberToDay(item);
    });

    // Return new table row elements, while setting the key
    return (
    <tr key={index}>
      <td>{days.join()}</td>
      <td>{element.from}</td>
      <td>{element.to}</td>
    </tr>
    );
  });

  return (
    <div className="App">
      <table>
          <thead>
            <tr>
              <th>Days</th>
              <th>From</th>
              <th>To</th>
            </tr>
          </thead>
          <tbody>
            {rows}
          </tbody>
        </table>
    </div>
  );
};

export default App;

https://codesandbox.io/s/long-tdd-or9lf?file=/src/App.js

请注意，在循环内返回元素时设置 key 属性非常重要，以帮助 React 和 Virtual DOM 进行优化。

如需了解更多信息，请查看 React 文档：
https://reactjs.org/docs/lists-and-keys.html

【讨论】：