0

Estoy intentando mostrar unos tickets en la pantalla desde una APi. Hice la petición con un fetch y la consola me muestra un array con la data que quiero que se muestren en la pantalla.

Hasta ahí todo bien pero los datos del array no aparecen en la pantalla.introducir la descripción de la imagen aquí

Edito el codigo fuente:

import React from 'react';
import { getAllTickets } from '../../lib/api';

  class Tickets extends React.Component {
  state = {
  tickets: [],
  clicked: false,
  };
  onclicked = () => {
  this.setState({ clicked: true });
  console.log('helloitsme');
  };
  componentDidMount = async () => {
  try {
  const { data } = await getAllTickets();
  if (data) {
    this.setState({ tickets: data.data });
  }
} catch (err) {}
  };
 render() {
 return (
  <article>
    <section className="container">
      {this.state.tickets.map((ticket) => {
        return (
          <div onClick={this.onclicked} key={ticket.id}>
            {this.state.clicked === true && (
              <div className="boxinfo">
                <h1 className="info">{ticket.fecha_adquisicion}</h1>
                <h2 className="info">{ticket.id_comercio}</h2>
                <h3 className="info">{ticket.precio_total}</h3>
              </div>
            )}
          </div>
        );
      })}
    </section>
  </article>
);
  }
 }
export default Tickets;

Ese es el método render que hice. Estaba pensando en el undefined "REACT_APP_SERVER_URL:" que se muestra en la consola, podría ser que la función que hice en la API este mal? Gracias

edito: la petición al API es la siguiente: introducir la descripción de la imagen aquí

6
  • Si puedes comparte el componente completo, o al menos donde este el método fetch como lo estas llamando y donde estas cambiando el estado, ¿Estas usando Redux? saludos
    – g.4
    el 10 mar. 2021 a las 20:27
  • Creo que en tu .map() te falta un return deberia de ser asi return <div onClick={this.onclicked} key={ticket.id}> proba y avisanos si eso te funciona.
    – jdromero88
    el 10 mar. 2021 a las 20:41
  • No entiendo, ya tengo ese return escrito si te fijas hay dos return no veo que con eso cambie nada el return que dices ya esta escrito.
    – Alicia
    el 10 mar. 2021 a las 20:48
  • Y no, no estoy usando redux. He añadido la petición al API por si veis algo que yo no. Gracias
    – Alicia
    el 10 mar. 2021 a las 20:48
  • 1
    Porque estás asignando al state un data.data, si ya en el método getAllTickets lo estás devolviendo como data.data.. no será ese el error? el 10 mar. 2021 a las 20:53

1 respuesta 1

3

No entra en el if del setState porque estás haciendo destructring de un array. La variable data es undefined y por eso no se evalúa a true el if.

La función getAllTickets ya devuelve los datos del array no hace falta hacer destructring.

componentDidMount = async () => {
  try {
    const data = await getAllTickets();
    if (data) {
      this.setState({ tickets: data });
    }
  } catch (err) {}
}

Como el console.log(data.data) lo haces en la función getAllTickets te muestra la respuesta. Pero si pones un console.log(data) en el componente verás que es undefined.

const { data } = await getAllTickets();
console.log(data) // undefined

Mira como usar destructring

Truthy values Valores que evalúan a true en javascript.

9
  • Cierto el console log de data me sale undefined pero aún así he modificado como dices la constante a const data y nada😫
    – Alicia
    el 10 mar. 2021 a las 22:36
  • Gracias por los links voy a leer eso a ver
    – Alicia
    el 10 mar. 2021 a las 22:37
  • si pones console.log(data) ahora luego de hacer el fix que he dicho que te sale?
    – hawks
    el 10 mar. 2021 a las 22:45
  • Ahora ya no me sale undefined, me devuelve un array con los datos no solo en api.js si no tambien en el sitio en sí "Tickets.jsx".
    – Alicia
    el 10 mar. 2021 a las 22:50
  • es muy raro. Te entra en el if?
    – hawks
    el 10 mar. 2021 a las 22:53

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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