遍历嵌套对象数组，渲染不同的标记

Question

我在一个 React 应用程序中遇到了一个兔子洞。我正在遍历这个对象数组：

const weeklyClasses = [
  {
    id: 1,
    day: "Monday",
    classDescription: [
      { classType: "11am-12pm Jazz", teacher: "Joe" },
      { classType: "1pm-2pm Blues", teacher: "Doe" },
      { classType: "3pm-4pm Samba", teacher: "Zen" }
    ]
  },
  {
    id: 1,
    day: "Tuesday",
    classDescription: [
      { classType: "11am-12pm Rock", teacher: "Sis" },
      { classType: "1pm-2pm Tango", teacher: "Ter" },
      { classType: "3pm-4pm Salsa", teacher: "Soul" }
    ]
  },
  // ...
];

我正在循环并检索所需的值，但目前classType输出为一个p。

const Data = () => {
  return weeklyClasses.map((o, i) => {
    return (
      <div className="classDay" key={o.id}>
        {o.day}
        <div className="classType">
          {o.classType}
          //Right here
          <p>{o.classDescription.map(i => i.classType)}</p>
        </div>
      </div>
    );
  });
};

我该如何将每个classType输出为不同的p标签？

在地图上进行映射是否可行？（我应该使用reduce吗？如何使用？）

- Null isTrue

Answer 1

不要将整个描述数组包裹在一个单一的p标签中：

<p>{o.classDescription.map(i => i.classType)}</p>

您可以将每个类描述元素包装在p中：

{o.classDescription.map(i => <p>{i.classType}</p> )}
{/*                          ^^^             ^^^^  */}

- nem035

---

非常感谢您先生！在地图上进行映射可以吗？还是应该将其缩小？ - Null isTrue

@NullisTrue 如果你所说的“在地图上进行映射”是指嵌套映射，那么这是完全可以的。这并不是什么坏事，实际上相当普遍。从技术上讲，内部映射只是映射嵌套元素的一小部分，而不是对整个映射元素进行映射，但无论如何，这都是完全可以的。当您想将集合减少到单个值时，会使用缩减。但这里并非如此，您要将一组JavaScript对象映射到显示这些对象中某些值的JSX元素集合。 - nem035

那很有道理。谢谢。 - Null isTrue