未定义的TypeError:无法读取未定义的属性unique_id (main.chunk.js:491)

Question

我的API数据如下所示：

{
    "matches": [
        {
            "unique_id": 1240849,
            "date": "2020-12-16T00:00:00.000Z",
            "dateTimeGMT": "2020-12-16T22:00:00.000Z",
            "team-1": "New Zealand A",
            "team-2": "Pakistan A",
            "type": "Tests",
            "squad": true,
            "matchStarted": true
        },
        {
            "unique_id": 1223869,
            "date": "2020-12-17T00:00:00.000Z",
            "dateTimeGMT": "2020-12-17T04:00:00.000Z",
            "team-1": "Australia",
            "team-2": "India",
            "type": "Tests",
            "squad": true,
            "matchStarted": true
        },
        {
            "unique_id": 1241135,
            "date": "2020-12-17T00:00:00.000Z",
            "dateTimeGMT": "2020-12-17T17:00:00.000Z",
            "team-1": "Fujairah",
            "team-2": "Sharjah",
            "squad": true,
            "matchStarted": true,
            "type": ""
        },
        {
            "unique_id": 1241134,
            "date": "2020-12-17T00:00:00.000Z",
            "dateTimeGMT": "2020-12-17T13:00:00.000Z",
            "team-1": "Ajman",
            "team-2": "Dubai",
            "squad": true,
            "matchStarted": true,
            "type": ""
        },
        {
            "unique_id": 1241133,
            "date": "2020-12-17T00:00:00.000Z",
            "dateTimeGMT": "2020-12-17T09:00:00.000Z",
            "team-1": "Emirates Cricket Board",
            "team-2": "Fujairah",
            "squad": true,
            "matchStarted": true,
            "type": ""
        }],"v": "1",
    "ttl": 51,
    "provider": {
        "source": "Various",
        "url": "https://cricapi.com/",
        "pubDate": "2020-12-18T12:05:47.221Z"
    },
    "creditsLeft": 250
}

APP.js

import React , {useEffect,useState} from 'react'
import "./App.css"
import {Button, Container, Grid} from "@material-ui/core"
import MyCard from './components/MyCard'
import Navbar from './components/Navbar'
import getMatches from './api/api'
function App(){

  const [matches,setMatches] = useState([])

  useEffect(() => {
    getMatches()
    .then((data)=> {console.log(data); setMatches(data.matches)})
    .catch((error)=>alert("Could not load",error));
    
  }, [])
  return (
    <div className="App">
      
      <Navbar/>
    
      <h1>Welcome to my Live Score APP</h1>
      <MyCard/>
      <Container>
        <Grid container>
          <Grid sm="2"></Grid>
          <Grid sm="8" >
            {
              matches.map((match)=>(
                
              <MyCard match ={match}/>))
        
            }
            
      <Button variant="outlined" color="primary"></Button>
      </Grid>
      </Grid>
      </Container>
    </div>
  )
}
export default App

MyCard.js

import {Card, Button, CardActions, CardContent, Typography, Grid } from '@material-ui/core'
import React from 'react'

const MyCard = (props) => {
    

    const getCard = () => {
        return (
           
            
            <Card style={{marginTop :15}} >
                <CardContent>
                    <Grid container justify="center">
                        <Grid item>
                            
                            <Typography>{props.match} </Typography>
                        </Grid>
                        <Grid item>
                        <img
                         style={{ width: 85 }}
                            src={require("../img/vs.png")}
                            alt=""
              />
                        </Grid>
                        <Grid item>
                            <Typography>2</Typography>
                        </Grid>
                    </Grid>
                    {/* <Typography variant="h5"> This is card </Typography> */}
                </CardContent>
                <CardActions>
                    <Grid container justify ="center">
                        <Button variant="contained" color="primary">
                            SHOW DETAIL
                        </Button>
                    </Grid>
                </CardActions>
            </Card>
           
        )
    }

    return getCard()
}

    export default MyCard

我是新来的反应。我正在尝试将获取的api数据作为支持从应用程序发送到MyCard组件。但得到的错误是未知的。

我们通常以props.child的形式访问子组件中的道具，这里我尝试过使用props.match"unique_id，match"unique_id，props.match.unique_id

请建议一种在子组件中访问道具的方法。

Answer 1

您在两个地方呈现MyCard，第一个在H1下，第二个在数组中。数组中的部件是可以的，但是第一张卡没有得到道具，因此没有定义。

 <Navbar/>

  <h1>Welcome to my Live Score APP</h1>
  <MyCard/> //<- here
  <Container>
    <Grid container>
      <Grid sm="2"></Grid>

在App.js中