在 React 的选项卡中迭代数组

Question

我有一个名为 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>

Answer 1

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

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

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

Answer 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 中的一些内容放入模板中，但我不知道具体是什么。