映射对象中的动态键

Question

嗨，我有一个像这样的JSON对象：

WorkTime=[{
      "Day": "6",
      "Time1": "8 : 00 - 9 : 00",
      "Time2": "9 : 00 - 10 : 00",
      "Time3": "10 : 00 - 11 : 00",
      "Time4": "11 : 00 - 12 : 00",
      "Time5": "12 : 00 - 13 : 00",
      "Time6": "13 : 00 - 14 : 00",
      "Time7": "17 : 00 - 18 : 00",
      "Time8": "18 : 00 - 19 : 00",
      "Time9": "19 : 00 - 20 : 00",
      "id": 1
    },
    {
      "Day": "0",
      "Time1": "8 : 00 - 9 : 00",
      "Time2": "9 : 00 - 10 : 00",
      "Time3": "10 : 00 - 11 : 00",
      "Time4": "11 : 00 - 12 : 00",
      "Time5": "12 : 00 - 13 : 00",
      "Time6": "13 : 00 - 14 : 00",
      "id": 2
    },]

我希望将对象的值插入到div中。但是我应该写对象键，我的键数是可变的。为此，我决定使用索引和动态调用键，但我对它的语法一无所知。我想做的几乎是这样：

 {
                   WorkTime.map((item, index) => (
                  <div key={index} id={`Ticket${item.Day}Box`} className="bg-gray-50 p-3 w-11/12
                   rounded-t-xl mx-auto" style={{ display: "none" }}>
                    {item.Time{index+1}} 
                  </div>
                )) }

而不是像这样调用键：

WorkTime.map((item, index) => (
                  <div key={index} id={`Ticket${item.Day}Box`} className="bg-gray-50 p-3 w-11/12
                   rounded-t-xl mx-auto" style={{ display: "none" }}>
                    {item.Time1} 
                  </div>
                )) }

Answer 1

要回答您的问题，可以使用括号语法和字符串内插来获得所需的内容：

item[`Time${index + 1}`]

我假设您确实意识到，这只会给您提供来自每个WorkTime对象的第一次输入。如果您想要显示所有的时间条目，则必须分别对它们进行迭代。为此，我建议将json的结构更改为如下所示：

WorkTime = [{
  id: 0, // whatever
  day: "day string",
  times: ["time 1", "time 2"] // etc
}]

修改json是不可能的，那么您可以使用以下方式收集所有Time键：

Object.keys(item).filter(k => k.match(/Time\d/))