在 React 的选项卡中迭代数组

Posted 2023-02-22

【中文标题】在 React 的选项卡中迭代数组

【英文标题】：Iterate Array in Tabs in React

【发布时间】：2020-10-23 18:03:22

【问题描述】：

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

请在此处查看我的代码框CLICK HERE

   <div>
      paymentMethods && paymentMethods.length > 0 ? (
        <Paper square className=classes.root>
          <Tabs
            value=value
            onChange=handleChange
            variant="fullWidth"
            indicatorColor="secondary"
            textColor="secondary"
            aria-label="icon label tabs example"
          >
            <Tab icon=<PhoneIcon /> label="Card" />
            <Tab icon=<FavoriteIcon /> label="Paypal" />
          </Tabs>

          <Grid container spacing=4>
            <Grid item xs=12 sm=6 md=3>
              <Card className=classes.card>
                <CardHeader className=classes.cardHeader title=`****` />
                <CardContent className=classes.content>
                  <Table className=classes.table aria-label="simple table">
                    <TableBody>
                      <TableRow>
                        <TableCell variant="head">Type</TableCell>
                        <TableCell variant="body">Card</TableCell>
                      </TableRow>
                      <TableRow>
                        <TableCell variant="head">Card Number</TableCell>
                        <TableCell variant="body">***</TableCell>
                      </TableRow>
                      <TableRow>
                        <TableCell variant="head">Expiry Month</TableCell>
                        <TableCell variant="body">12/2</TableCell>
                      </TableRow>
                      <TableRow>
                        <TableCell variant="head">Expiry Year</TableCell>
                        <TableCell variant="body">2021</TableCell>
                      </TableRow>
                      <TableRow>
                        <TableCell variant="head">CVC</TableCell>
                        <TableCell variant="body">***</TableCell>
                      </TableRow>
                    </TableBody>
                  </Table>
                </CardContent>
              </Card>
            </Grid>
          </Grid>
        </Paper>
      ) : (
        <Typography>no available</Typography>
      )
</div>

【问题讨论】：

你能告诉我们你的错误吗？

@Anh Tuan。其实没有错误。我只是无法迭代它。你能帮我迭代一下吗？

【参考方案1】：

Here我试图做一个有效的例子。您可以组织您的json 以实现更有效的循环。我刚刚创建了另一个常量来存储更多参数以放入选项卡中。

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

标签确实需要一些基于索引的面板选择。这些面板通过循环paymentMethods JSON 数据填充内容。当您将更改 JSON 结构时，只需添加一个条件语句。例如，PayPal 没有 CVC。

【参考方案2】：

您可能正在寻找这样的东西：

  <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>

请注意，标签和 onChange 代码只是一个猜测 - 您可能想将 p 中的一些内容放入模板中，但我不知道具体是什么。

【讨论】：

呃，不，对不起。这就是你在 React 中迭代的方式，使用 array.map。应用到您的代码应该足够了。

顺便说一句，我不确定你是否删除了赞成票，因为我不会分叉你的代码，但如果是这样，那有点粗鲁。我正在花时间免费帮助你，但我没有时间为你做你的工作。

好的，不用担心。可悲的是，习惯了这种事情。

嗨。你缺少一些东西。你把网格部分放在哪里？卡片部分

让我们continue this discussion in chat.