Tipo no utilizado Error: No se puede leer la propiedad 'unique_id' de MyCard (main.chunk.js:491)

Mis datos de API son los siguientes:

{
    "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 (
    

      
      
    
      
Welcome to my Live Score APP

      
      
        
          
          
            {
              matches.map((match)=>(
                
              ))
        
            }
            
      
      
      
      
    

  )
}
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 (
           
            
            
                
                    
                        
                            
                            {props.match} 
                        
                        
                        
                        
                        
                            2
                        
                    
                    {/*  This is card  */}
                
                
                    
                        
                    
                
            
           
        )
    }

    return getCard()
}

    export default MyCard

Soy nuevo para reactr. Estoy tratando de enviar datos api obtenidos como props de App a MyCard componente. Pero conseguir el error como Indefinido.

Generalmente accedimos a props en componente infantil como props.child, aquí he probado con props.match["unique_id], match["unique_id], props.match.unique_id

Por favor, sugiera una manera de acceder a los props en el componente infantil.

Pregunta hecha hace 3 años, 4 meses, 27 días - Por codexcrafter

3 Respuestas:

  • Usted está renderizando MyCard en dos lugares, primero bajo H1, segundo en array. Parte en array está bien, pero la primera tarjeta no está recibiendo props, por lo tanto no está definida.

     

  
    Welcome to my Live Score APP
    
   //<- here

    en App.js

    Respondida el Dec 18, 2020 a las 12:36 - por binarybrainiac

    Votos positivos: 0 | Votos negativos: 0

  • El error que estás viendo, "No se puede leer la propiedad 'uniqueid' de undefined", indica que en algún momento estás tratando de acceder a la propiedad 'uniqueid' de un objeto que es undefined.

    En tu código, el problema parece estar en cómo estás pasando la prop 'match' al componente 'MyCard' en tu componente 'App'. En lugar de pasar la prop 'match' como una cadena dentro de llaves, deberías pasarla como un objeto directamente. Además, la etiqueta '' debería ser en minúsculas en lugar de en mayúsculas.

    Aquí te dejo cómo deberías ajustar tu componente 'App':

    jsx
import React, { useEffect, useState } from 'react';
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("No se pudieron cargar los datos", error));
  }, []);

  return (
    
    
      

      
    Welcome to my Live Score APP
    

      
        
          {matches.map((match) => (
            
          ))}
        

        
      
    
    
  );
}

export default App;

    Y también, aquí te dejo cómo deberías ajustar tu componente 'MyCard':

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

const MyCard = (props) => {
  const { match } = props;

  const getCard = () => {
    return (
      
        
          
            
              {match.team-1} vs {match.team-2} 
            
            
              
            
            
              2
    Votos positivos: 0 | Votos negativos: 0

  • El error "Cannot read property 'unique_id' of MyCard" se produce porque estás intentando acceder a una propiedad de un objeto que aún no existe. En el método getCard del componente MyCard, estás intentando acceder a la propiedad match de los props, pero esta propiedad aún no se ha asignado.

    Para solucionar este problema, puedes comprobar si la propiedad match está definida antes de intentar acceder a sus propiedades:

    javascript
const getCard = () => {
  if (props.match) {
    return (
      // Tu código anterior aquí
    );
  } else {
    return 
    Cargando...
    ;
  }
};

    Esta comprobación asegura que solo intentas acceder a la propiedad match cuando está disponible, evitando el error.

    También hay algunos problemas menores en tu código:

    La propiedad :15}}="" en la etiqueta <card> es innecesaria. El estilo en línea en el atributo style está mal formado. Debes usar comillas dobles en lugar de comillas simples.

    Aquí tienes el código corregido:

    MyCard.js

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

const MyCard = (props) => {

  const getCard = () => {
    if (props.match) {
      return (
        
          
            
              
                {props.match.team1}
              
              
                
              
              
                {props.match.team2}
              
            
            {/  This is card  /}
          
          
            
              
            
          
        
      );
    } else {
      return 
    Loading...
    ;
    }
  };

  return getCard();
};

export default MyCard;

    App.js

    javascript
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 (
    
    

      

      
    Welcome to my Live Score APP
    

      
        
          
          
            {
              matches.map((match) => (
                
              ))
            }

            
          
        
      
    
    
  )
}

export default App;

    Respondida el Dec 19, 2020 a las 12:40 - por Gemini

    Votos positivos: 0 | Votos negativos: 0