0

tengo un problema el renderizar una una propiedad que me llega undefined me tira el siguiente error :

El tema es que estoy validando si el objeto viene nulo o indefinido, quiero saber si es la forma correcta o se me escapa algo, este es el componente de la página :

function AvesTipo() {
  const [birdsFounded, setBirdsFounded] = useState( [])
  const [cardsBird, setCardsBird] = useState(false)
  const [loop, setLoop] = useState(true)

  var data = []

  const fetchData = async () => {

    data = await db.collection('birds_type').get()
    setBirdsFounded(  data.docs.map( doc =>  doc.data()  ))

    setLoop(false)    
  }

useEffect( () => {

  fetchData()

  if(  ( birdsFounded != undefined )  ||  ( birdsFounded != null )  ||  ( 
       Object.keys(birdsFounded).length != 0 ))  {

    setCardsBird(<CardGroup
      data = {birdsFounded}
    />)
  }
  }, [loop] )


  return (
    <div>
      <Container className="mt-5">
        <Row>
          {cardsBird}
        </Row>
      </Container>

      <FooterComponent/>
    </div>

  )
}

y este es componente que estoy llamando de MyCard.js:

export function CardGroup(props) {

  let [cardsGroup, setCardsGroup] = useState([]) 
  let data = props.data

  var _cardsGroup =  Object.keys(data).map( row => {
      console.log('row',row)
      let _data = data[row]

      return (
          <Card key={_data.image}>
              <Card.Img variant="top" src = { _data.image } />
              <Card.Body>
                  <Card.Title>{ _data.title }</Card.Title>
                  <Card.Text>
                      { _data.short_description }
                  </Card.Text>
              </Card.Body>
          </Card>
      ) 
  })

  return (
      <Col>
          <CardGroup>
              {cardsGroup}
          </CardGroup>
      </Col>
  )
}

Cualquier comentario o sugerencia es bien recibida, saludos

2 respuestas 2

2

Te está diciendo que tienes un error en

var _cardsGroup =  Object.keys(data).map( row => {

Por descarte, dado que map es un método de Array, el error está en Object.keys. Significa que el argumento no es un objeto.

Lo anterior implica que data es nulo o indefinido, o sea el componente no tiene una propiedad data.

Yo en tu caso usaría un operador de coalescencia.

  let [cardsGroup, setCardsGroup] = useState([]),
      data = props.data || {}, // ahora si data es falsy su default es un objeto vacío
      _cardsGroup = Object.keys(data).map(....)

Si data es un objeto vacío no tiene llaves luego cardgroup es [].map(...) que por definición es [].

1

Parece que estás intentando setear en el estado el propio componente pasandole data, es algo raro, te voy a poner mi approach a ver si te sirve de ayuda y/o guía para el resto.

Avestipo se encarga de traer la información de los pájaros entiendo desde un servicio externo asíncrono.

function AvesTipo() {
  const [birdsFounded, setBirdsFounded] = useState([]);
  const [cardsBird, setCardsBird] = useState(false);

  const fetchData = async () => {
    const data = await db.collection('birds_type').get();
    const birds = data.docs.map(doc => doc.data())

    setBirdsFounded(birds);
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      <Container className="mt-5">
        <Row>
          <CardGroup data={birdsFounded} />
        </Row>
      </Container>

      <FooterComponent />
    </div>
  );
}

Ahora, una vez que llegue la respuesta (data), es la lista que queremos setear en el estado. data.docs.map(doc => doc.data()) esta linea supongo que tienes claro que recibe siempre en data un objeto con una propiedad docs de tipo array de elementos que cada elemento tiene una propiedad data que es de tipo función que invocas por elemento de respuesta.

Esto es un poco raro así que solamente lo comento para que lo revises, porque lo mismo sole necesitas pasar data.docs pero no lo sé.

De manera que el componente CardGroup quedaría algo así:

const CardGroup = ({ data }) => (
      <Col>
          <CardGroup>
              {Object.values.map(item => (
                 <Card key={item.image}>
                   <Card.Img variant="top" src = { item.image } />
                   <Card.Body>
                     <Card.Title>{ item.title }</Card.Title>
                     <Card.Text>
                      { item.short_description }
                     </Card.Text>
                   </Card.Body>
                 </Card>
               ))}
          </CardGroup>
      </Col>
  )

export default CardGroup;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.