Javascript 在数组中映射数组

我正在尝试映射一个相当复杂的数组，如下所示：

[
  "Group A",
  ["10/7/2020", "15/7/2020"],
  "Group B",
  ["5/5/2019"],
  "Group C",
  ["3/3/2020", "5/7/2020", "25/7/2020"],
]

Group A
    10/7/2020
    15/7/2020

Group B
    5/5/2019

Group C
    3/3/2020
    5/7/2020
    25/7/2020

我试图在react native的render方法中映射这个数组并显示它。我在寻找这样的结果：

[
  "Group A",
  ["10/7/2020", "15/7/2020"],
  "Group B",
  ["5/5/2019"],
  "Group C",
  ["3/3/2020", "5/7/2020", "25/7/2020"],
]

Group A
    10/7/2020
    15/7/2020

Group B
    5/5/2019

Group C
    3/3/2020
    5/7/2020
    25/7/2020

---

我该怎么做？谢谢

这只是反应，不是特别地道，但你会明白要点的

这里的想法是首先将“平面”数据压缩成一个对象数组

{header:…，values:…}

，您可以按照通常的方式进行映射

const data = [
  "Group A",
  ["10/7/2020", "15/7/2020"],
  "Group B",
  ["5/5/2019"],
  "Group C",
  ["3/3/2020", "5/7/2020", "25/7/2020"],
];
const mangledData = [];
for(let i = 0; i < data.length; i += 2) {
  mangledData.push({header: data[i], values: data[i + 1]});
}

return mangledData.map(({header, values}) => (
  <div key={header}>
    <h1>{header}</h1>
    <ul>{values.map((v, i) => <li key={i}>{v}</li>))}</ul>
  </div>
));

const数据=[
“A组”，
["10/7/2020", "15/7/2020"],
“B组”，
["5/5/2019"],
“C组”，
["3/3/2020", "5/7/2020", "25/7/2020"],
];
常量mangledData=[]；
对于（设i=0；i(
{header}
{values.map（（v，i）=>
{v}
）}
));

您可以使用

reduce

直接渲染数据，也可以先清理数据，然后按照建议进行渲染

export default function App() {
  const groups = [
    "Group A",
    ["10/7/2020", "15/7/2020"],
    "Group B",
    ["5/5/2019"],
    "Group C",
    ["3/3/2020", "5/7/2020", "25/7/2020"]
  ];

  return (
    <>
      {groups.reduce((acc, item) => {
        if (typeof item === "string") {
          acc.push(<span key={item}> {item} </span>);
        } else {
          acc.push(
            <ul>
              {item.map((data, index) => (
                <li key={index}> {data} </li>
              ))}
            </ul>
          );
        }
        return acc;
      }, [])}
    </>
  );
}

---

你想在哪里渲染这个，你尝试了什么？你想把这个数组转换成对象吗？@ibrahimmahrir是的，很好。我在蟒蛇之地