1

Tengo este componente en react para obtener algunos datos y volver a representar el estado. Hay un proceso en curso en el back-end, por lo que lleva unos segundos representar el estado.

¿Hay alguna forma de representar un mensaje de carga antes de que se procese el estado?

class TicketsContainer extends React.Component {
  state = {
    data: []
  }

  constructor() {
    super();

    this.apiUrl = process.env.REACT_APP_API_URL || 'https://localhost:5050';
    this.getData = this.getData.bind(this);


  }

  componentDidMount() {
    this.getData();
  }

  /** de esta forma obtengo los datos */
  getData() {
    Axios.get(`${this.apiUrl}/agents`)
      .then(result => this.setState({ ...this.state, data: result.data }))
      .catch(error => alert(error.message));
  }

  /** Y de la siguiente forma muestro los datos en una tabla */
  render() {
    return {this.state.data.length && (
      <tbody className="list table-hover">
        {this.state.data.map((agent) => {
          return (
            <tr id={agent._id} onClick={() => this.handleRowClick(agent)}>
              <td className="">
                <div className="row">
                  <div className="col-1 mr-3 xs">
                    <div class="avatar-table">
                      <img
                        src={avatar}
                        alt="..."
                        class="avatar-img rounded avatar-xs"
                      />
                    </div>
                  </div>
                  <div className="col-auto mt-1">
                    {agent.firstName} {agent.lastName}
                  </div>
                </div>
              </td>
              <td className="">{agent.phone}</td>
              <td className="">{agent.email}</td>
              <td className="">{agent.agentType}</td>
            </tr>
          );
        })}
      </tbody>
    )}
  }
}

Por ejemplo que en la tabla (o en lugar de la tabla) se muestre el mensaje : "Se estan cargando los datos"

3
  • Lo más más simple en este caso es que en lugar de usar una expresión AND, uses el operador ternario: {this.state.data.length === 0 ? 'Tu mensaje de fallback' : (el JSX de tu tabla). Pero aunque ésta es la solución inmediata, me encantaría tomar tu código (por su sencillez) como ejemplo de como se haría con hooks y con Suspense, me permitirías hacer la edición y poner entonces una respuesta más completa? Pido permiso porque aquí en el comentario ya te di la solución y tú podrías compartir por ti mismo la solución real y ganarte más puntos, pero además va un poco más allá de tu pregunta concr Commented el 29 nov. 2019 a las 2:09
  • 1
    No problema, puedes hacer de ella tuya si quieres. estoy aprendiendo y agradezco tu predisposición. Commented el 29 nov. 2019 a las 3:10
  • Perfecto, en un ratito más lo comparto completo, mientras puedes probar la solución simple que te di en el comentario. Sólo pasa tu expresión a una con operador ternario. Commented el 29 nov. 2019 a las 3:26

1 respuesta 1

0

Bienvenido de nuevo a StackOverflow en español, espero poder ayudarte, y te agradezco me permitas compartir que existe más de una solución al mismo requerimiento.

Para empezar, voy a simplificar un poco tu componente que está en una clase, para plantearlo como un componente funcional con hooks, ya que precisamente, disminuyen el boilerplate y abren muchas nuevas posibilidades.

import React, { useState, useEffect } from 'react'

function TicketsContainer ({ apiUrl, handleRowClick }) {
  const [ tickets, setTickets ] = useState([])

  /** con useEffect llamamos a la API, "efectuamos una acción" */
  useEffect(() => {
    Axios.get(`${apiUrl}/agents`)
      .then(result => setTickets( result.data ))
      .catch(error => alert(error.message))
  }, []) /* dependencias === [], invoca efecto solo al montar el componente */

  return {tickets.length && (
      <tbody className="list table-hover">
        {tickets.map((agent) => {
          return (
            <tr id={agent._id} onClick={() => handleRowClick(agent)}>
              <td className="">
                <div className="row">
                  <div className="col-1 mr-3 xs">
                    <div class="avatar-table">
                      <img
                        src={avatar}
                        alt="..."
                        class="avatar-img rounded avatar-xs"
                      />
                    </div>
                  </div>
                  <div className="col-auto mt-1">
                    {agent.firstName} {agent.lastName}
                  </div>
                </div>
              </td>
              <td className="">{agent.phone}</td>
              <td className="">{agent.email}</td>
              <td className="">{agent.agentType}</td>
            </tr>
          )
        })}
      </tbody>
    )}
}

Como puedes ver, estoy pasando la apiUrl y la función para manejar el click del agente, en los props del componente, la función de handleClick la puedes declarar en el mismo módulo, o dentro de la misma función. Por lo demás la lógica es idéntica. Los hooks que utilizamos son useEffect y useState

¿Ahora, qué opciones tenemos para mostrar un mensaje de espera?

La primera y más sencilla es cambiar la expresión de tickets.length && ${jsx} a un operador ternario, comparando contra el tamaño del array de tickets, quedaría algo así:

return tickets.length === 0
  ? 'Por favor espere, cargando la lista de tickets'
  : {<tbody>...}

Había prometido en los comentarios, usar Suspense, pero por el momento, solo está en producción para componentes que se cargan en demanda con React.lazy. No obstante en un futuro próximo puede ser una solución aún más simple que manualmente verificar los datos que tenemos en el state de nuestro componente: https://reactjs.org/docs/concurrent-mode-suspense.html

No obstante veamos otra opción, manejar la carga de datos externos, y el manejo de error, con un patrón muy interesante y básico y que te permitirá hacer más testeable tus componentes. Es el simple patrón Contenedor - Presentación (o smart vs dumb).

En este separamos la lógica de recuperar datos, de la presentación, básicamente tu componente de presentación no sabe de donde le llegan los datos, o el mensaje de error, o la función que maneja el click a una fila, nada, solo recibe y presenta los datos y pasa los eventos a la función que maneja el dato, es pura vista.

Y por otra parte, tienes el contenedor, que maneja la lógica y las pasa a la presentación.

function TicketsContainerHandleError ({ apiUrl }) {
  function handleRowClick (agent) {
    // useModal u otra mecanismo para manejar el detalle de un elemento
  }

  const [ tickets, setTickets ] = useState([])
  const [ error, setError ] = useState('')
  const [ loading, setLoading ] = useState('Por favor espere, cargando tickets')

  const retryFn = () => {
    setLoading(true)
    setError('')
  }

  useEffect(() => {
    Axios.get(`${apiUrl}/agents`)
      .then(result => {
        setTickets( result.data )
        setLoading(false)
       })
      .catch(error => setError(error.message))
  }, [error])



  return (
    <TicketsView
      loading={loading}
      tickets={tickets}
      error={error}
      handleRowClick={handleRowClick}
      retryFn={retryFn}
    />
  )
}

function TicketsView ({ loading, tickets, error, handleRowClick, retryFn }) {
   if (loading) {
      return <div>{loading}</div>
   }
   if (error !== '') {
      return (
         <div className="errorRecover">
           <div className="errorMessage">{error}</div>
           <button onClick={() => retryFn()}>Puede intentar nuevamente</button>
         </div>
      )
   }
   return (<tbody className="list table-hover">
        {tickets.map((agent) => {
          return (
            <tr id={agent._id} onClick={() => handleRowClick(agent)}>
              <td className="">
                <div className="row">
                  <div className="col-1 mr-3 xs">
                    <div class="avatar-table">
                      <img
                        src={avatar}
                        alt="..."
                        class="avatar-img rounded avatar-xs"
                      />
                    </div>
                  </div>
                  <div className="col-auto mt-1">
                    {agent.firstName} {agent.lastName}
                  </div>
                </div>
              </td>
              <td className="">{agent.phone}</td>
              <td className="">{agent.email}</td>
              <td className="">{agent.agentType}</td>
            </tr>
          )
        })}
      </tbody>)
}

El patrón presentación - contenedor, te permite sacar de la lógica de la vista, incluso mayor complejidad y manejar otros casos de la lógica de estado, por ejemplo hacer cancelable la promesa del fetch de Axios, u otras librerías, evitando así errores por pasar datos (se da el caso con setState en componentes de clase también) a componentes que ya fueron desmontados.

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.