Javascript 在React中的选项卡中迭代数组

我有一个名为paymentMethods的数组，我想将它迭代到选项卡？我的问题是我不能迭代它

请在这里查看我的代码沙盒

{paymentMethods&&paymentMethods.length>0(
类型
卡片
卡号
***
到期月份
12/2
到期年
2021
CVC
***
) : (
不出借
)}

您可能正在寻找以下内容：

  <Tabs
    value={value}
    onChange={handleChange}
    variant="fullWidth"
    indicatorColor="secondary"
    textColor="secondary"
    aria-label="icon label tabs example"
  >
  {paymentMethods.map(p => (
      <Tab icon={<PhoneIcon />} label="{p.label}" />
  ))}
  </Tabs>

{paymentMethods.map（p=>(
))}

请注意，标签和onChange代码只是一个猜测-您可能想将

p

中的一些内容放入模板中，但我不知道具体是什么。

我已尝试制作一个工作示例。您可以组织

json

，以实现更高效的循环。我只是做了另一个常量来存储更多的参数放在选项卡中

        {paymentmethodNames.map((p, index) => (
          <Tab icon={p.icon} label={p.title} {...a11yProps(index)} />
        ))}

{paymentmethodNames.map（（p，index）=>(
))}

这些选项卡确实需要一些基于索引的面板选择。面板通过循环

paymentMethods

JSON数据来填充内容。当JSON结构发生变化时，只需添加一条条件语句。例如，PayPal没有CVC。

---

你能告诉我们你的错误吗？@Anh Tuan。实际上没有错误。我就是不能重复。你能帮我重复一下吗？呃，不，对不起。这就是在React中使用array.map进行迭代的方式。你应用你的代码就足够了。顺便说一句，我不确定你是否删除了upvote，因为我不会放弃你的代码，但如果是这样，那就有点粗鲁了。我会花时间免费帮你，但我没有时间为你做你的工作。好的，不用担心。很遗憾，我已经习惯了这种事。你缺少一些东西。你把网格部分放在哪里？卡片让我们分享。

        {paymentmethodNames.map((p, index) => (
          <Tab icon={p.icon} label={p.title} {...a11yProps(index)} />
        ))}