Javascript 渲染运行两次

我有一个国家的名单，我想显示一些有关该国的信息。我运行一个循环以显示每个国家的信息。我已经为一个国家创建了一个组件

const CountryCard = ({ info }) => {
  const { country, infoForLastDate, path } = info
  return (
    <Card >
      <CardContent>
        <Typography variant="h5" component="h2" >
          {country.name}
        </Typography>
        <Flag oneToOne={country.oneToOne} fourToThree={country.fourToThree} />
        <Typography variant="body2" >
          Confirmed: {infoForLastDate.confirmed}
        </Typography>
        <Typography variant="body2" component="p">
          Recovered: {infoForLastDate.recovered}
        </Typography>
        <Typography variant="body2" component="p">
        Deaths: {infoForLastDate.deaths}
        </Typography>
      </CardContent>
      <CardActions>
        <Link href={path}>
          See more
        </Link>
      </CardActions>
    </Card>
  )
}

export default CountryCard

---

如何将

info

传递给

组件？可能您遗漏了

oneToOne

，在

国家/地区中。请添加使用添加的组件。该列表来自StaticQuery组件（为gatsby提供），顺便说一句，如果您只有一个国家，您的组件将不会呈现，因为您现在的条件是：
{list.length>1…}
您可以通过使用
{list.length&&…}来修复该问题
正如JavaScript中的0转换为
false
并且任何其他数字都等于
true
您可以
log（list）
在
{list.length>1&&list.map（country=>
之前查看您的数组是否在我认为列表中第二个国家可能不存在的每个国家都有oneToOne键
import React from 'react'
import { imageUrlFor } from '../lib/image-url'

const Flag = ({ oneToOne, fourToThree }) => {
  const  url = imageUrlFor(oneToOne.asset._id)

  return (
    <img src={url} />
  )
}

export default Flag


const CountryList = ({list}) => {
  return (
    <Grid container spacing={3}>
      { list.length > 1 && list.map(country => {
        const countryWithPath = {
          ...country,
          path: `/country/${country.country.name.toLowerCase().replace(' ', '-').replace('*', '')}`
        }
        return (
          <Grid item xs={12} sm={6} key={country._id} >
            <CountryCard info={countryWithPath} />
          </Grid>)
      })
      }
    </Grid>
  )
}

export default CountryList