Javascript React js-data.map不是一个函数 export default function Case（）{ const classes=useStyles（）； const[data，setData]=useState（[]） const getcovid=async（）=>{ const api=wait fetch（'https://api.rootnet.in/covid19-in/stats/latest'); const res=await api.json（）； console.log（res.data.summary） setData（res.data.summary） } useffect（（）=>{ getcovid（） },[]) 返回( 材质UI网格： { data&&data.map（项=>{ 返回( 确诊病例：{item} xs=3 xs=3 ) }) } ); }

我的api-{ “成功”：没错， “数据”：{ “摘要”：{ “总数”：26289290， “已确认的Casesindian”：26289242， “保兑证券”：48， “已出院”：23070365， “死亡”：295525人， “确认ButLocationUnIdentified”：0 },

但是它显示了一个错误-TypeError:data.map不是一个函数

---

我尝试了data&&data.map和data.map，但仍然遇到相同的错误

在此处输入代码
您的数据是
对象
而不是
数组
。您可以尝试改用此选项：

export default function Case() {
  const classes = useStyles();
  const[data,setData]=useState([])
  const getcovid=async()=>{
    const api=await fetch('https://api.rootnet.in/covid19-in/stats/latest');
    const res=await api.json();
    console.log(res.data.summary)
    setData(res.data.summary)
  }
  useEffect(()=>{
    getcovid()
  },[])
    
  return (
      
    <div>
        <Typography variant="subtitle1" gutterBottom>
        Material-UI Grid:
      </Typography>
        {
            data&&data.map(item=>{
                return(
                <Grid container spacing={3}>
                <Grid item xs={3}>
                  <Paper className={classes.paper}>Confirmed Cases: <br/>{item}</Paper>
                </Grid>
                <Grid item xs={3}>
                  <Paper className={classes.paper}>xs=3</Paper>
                </Grid>
                <Grid item xs={3}>
                  <Paper className={classes.paper}>xs=3</Paper>
                </Grid>
                
                
              </Grid>
                )  
              
            })
        }
       
     
      </div>
  );
}

您的数据是
对象
而不是
数组
。您可以尝试改用它：

export default function Case() {
  const classes = useStyles();
  const[data,setData]=useState([])
  const getcovid=async()=>{
    const api=await fetch('https://api.rootnet.in/covid19-in/stats/latest');
    const res=await api.json();
    console.log(res.data.summary)
    setData(res.data.summary)
  }
  useEffect(()=>{
    getcovid()
  },[])
    
  return (
      
    <div>
        <Typography variant="subtitle1" gutterBottom>
        Material-UI Grid:
      </Typography>
        {
            data&&data.map(item=>{
                return(
                <Grid container spacing={3}>
                <Grid item xs={3}>
                  <Paper className={classes.paper}>Confirmed Cases: <br/>{item}</Paper>
                </Grid>
                <Grid item xs={3}>
                  <Paper className={classes.paper}>xs=3</Paper>
                </Grid>
                <Grid item xs={3}>
                  <Paper className={classes.paper}>xs=3</Paper>
                </Grid>
                
                
              </Grid>
                )  
              
            })
        }
       
     
      </div>
  );
}

您发布的API响应显示，
data.summary
是一个对象，而不是数组。对象没有
map
方法，但数组有。您可以不使用
map
而只单独访问属性，例如
{data.total}
和
{data.death}
您发布的API响应显示，
数据。摘要
是一个对象，而不是数组。对象没有
映射
方法，但数组有。您不必使用
映射
，只需单独访问属性，例如
{data.total}
和
{data.deations}
尝试
控制台.log>（数据类型，数据）
查看数据是什么。尝试
控制台.log（数据类型，数据）
查看数据是什么。