Map方法返回数组项多次

Question

我有一个包含图片的对象数组：

import React, { Fragment } from "react"
import { useStaticQuery, graphql } from "gatsby"

import Button from "@material-ui/core/Button"
import Card from "@material-ui/core/Card"
import CardActions from "@material-ui/core/CardActions"
import CardContent from "@material-ui/core/CardContent"
import CardMedia from "@material-ui/core/CardMedia"
import { CardActionArea, GridList } from "@material-ui/core"
import CssBaseline from "@material-ui/core/CssBaseline"
import Grid from "@material-ui/core/Grid"
import Toolbar from "@material-ui/core/Toolbar"
import Typography from "@material-ui/core/Typography"
import Container from "@material-ui/core/Container"
import Link from "@material-ui/core/Link"

import homePageStyles from "../ui/styles/homePageStyles"

import mobile from "../../images/mobileApps.jpeg"
import coporation from "../../images/coporations.png"
import statute from "../../images/gavel.png"
import policy from "../../images/policies.png"

export default function HeroBlock() {
  const classes = homePageStyles()

  const data = useStaticQuery(graphql`
    query getCardCategoriesAndCounts {
      allStrapiCategory {
        edges {
          node {
            category
            strapiId
          }
        }
      }
      allStrapiMobileApplication {
        totalCount
      }
      allStrapiCorporation {
        totalCount
      }
      allStrapiStatutoryLaw {
        totalCount
      }
      allStrapiPolicyIssue {
        totalCount
      }
    }
  `)

  const categories = data.allStrapiCategory.edges

  const categoryImages = [
    { cImg: mobile },
    { cImg: coporation },
    { cImg: statute },
    { cImg: policy },
  ]

  console.log(categoryImages)

  const catImage = categoryImages.map(categoryImage => {
    return (
      <Fragment>
        <CardMedia
          image={categoryImage.cImg}
          className={classes.images}
        ></CardMedia>
      </Fragment>
    )
  })

  const cards = (
    <Fragment>
      {categories.map(c => (
        <Card style={{ width: "15.625rem", wordWrap: "break-word" }}>
          <div>{catImage}</div>
          <CardActionArea>
            <CardContent>
              <Typography variant={"h6"}>
                {c.node.category.toUpperCase().replace(/_/g, " ")}
              </Typography>
              <Fragment>
                {c.node.category === "Mobile_Apps" ? (
                  <Typography variant="paragraph">
                    {`There are currently ${data.allStrapiMobileApplication.totalCount} mobile applications.`}
                  </Typography>
                ) : c.node.category === "Corporations" ? (
                  <Typography variant="paragraph">
                    {`There are currently ${data.allStrapiCorporation.totalCount} coporations.`}
                  </Typography>
                ) : c.node.category === "Statutes" ? (
                  <Typography variant="paragraph">
                    {`There are currently ${data.allStrapiStatutoryLaw.totalCount} statutory laws.`}
                  </Typography>
                ) : c.node.category === "Policy_Issues" ? (
                  <Typography variant="paragraph">
                    {`There are currently ${data.allStrapiPolicyIssue.totalCount} policy issues.`}
                  </Typography>
                ) : (
                  <div></div>
                )}
              </Fragment>
            </CardContent>
          </CardActionArea>
        </Card>
      ))}
    </Fragment>
  )

  return (
    <React.Fragment>
      <CssBaseline />
      <main>
        <div className={classes.heroContent}>
          <Grid container>
            <Grid item classes={{ root: classes.heroColumn }}>
              <Grid container>
                <Grid
                  item
                  container
                  direction="column"
                  classes={{ root: classes.hero }}
                >
                  <Typography component="h1" variant="h2" align="center">
                    MIKE <br /> The Mobile Information Knowledge Ecosystem
                  </Typography>
                  <Typography variant="h5" align="center" paragraph>
                    <strong>
                      <em>The</em>{" "}
                    </strong>
                    central repository for how to extract data from a mobile
                    device, extract data from a mobile application, what data
                    the mobile app provider retains, and the specific laws
                    pertaining to accessing that data.
                  </Typography>
                </Grid>
              </Grid>
            </Grid>
          </Grid>
        </div>
        <Grid Container>
          <Grid item container justifyContent="space-evenly">
            {cards}
          </Grid>
        </Grid>
      </main>
    </React.Fragment>
  )
}

更新了整个代码库。有多个map语句。如果这是问题，如何在React内部映射多个数组？是否需要使用某种数据存储？它返回每个图像4次，而不是每张卡片的每个图像。

- timbo245

---

在分配给catImage之前，加上一个 console.log语句。我相信你也会看到它执行了4次, -) 很明显，你还有另一个循环没有包含在你的问题中。 - trincot

是的，请更新您的问题，包括一个完整的代码示例，这样我们就可以看到您的代码实际上在做什么。 - Drew Reese

你正在为每个类别渲染图像数组。由于这不是你想要做的，那么你如何将特定类别与特定的catImage图像相关联呢？ - Drew Reese

嗨@timbo245！ 我添加了我的答案。请根据我的答案更新您的代码。它将解决您的问题。如果我的答案对您有用，您是否愿意给我点赞呢？ 谢谢。 - Cardoso

Answer 1

你生成了一个卡片媒体组件的数组，然后在另一个循环中渲染它，所以你会看到后面映射的每个类别都重复出现了4个类别图像。

const catImage = categoryImages.map(categoryImage => { // array
  return (
    <Fragment>
      <CardMedia
        image={categoryImage.cImg}
        className={classes.images}
      ></CardMedia>
    </Fragment>
  )
})

const cards = (
  <Fragment>
    {categories.map(c => (
      <Card style={{ width: "15.625rem", wordWrap: "break-word" }}>
        <div>{catImage}</div> // <-- render array of images here!!
        <CardActionArea>
          ...

假设 categoryImages 和 categories 数组长度相同且排序一致，则可以直接在映射中渲染卡片媒体组件，并使用当前索引从 categoryImages 数组中访问正确的图像。

const cards = (
  <Fragment>
    {categories.map((c, index) => ( // <-- use current index
      <Card style={{ width: "15.625rem", wordWrap: "break-word" }}>
        <CardMedia
          image={categoryImages[index].cImg} // <-- access by index
          className={classes.images}
        />
        <CardActionArea>
          ...

- Drew Reese

Answer 2

Array.map返回数组。因此，catImage是一个包含组件的数组。
您可以通过指定索引号来使用每个CardMedia组件。

catImage[index]

catImage[0] 是第一张卡片。 因此，您可以像下面这样更新您的代码：

const cards = (           // <==== line 74
  <Fragment>
    {categories.map((c, index) => (
      <Card style={{ width: "15.625rem", wordWrap: "break-word" }}>
        <div>{catImage[index]}</div>

希望我的回答能解决你的问题。
谢谢。

- Cardoso