Ожидание сообщения, пока я доставляю данные

У меня есть этот компонент в реакции, чтобы получить некоторые данные и заново представить состояние. В серверной части идет непрерывный процесс, поэтому для представления состояния требуется несколько секунд.

Есть ли способ представить сообщение загрузки до обработки статуса?

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>
    )}
  }
}

Например, в таблице (или вместо таблицы) отображается сообщение: « Данные загружаются "

1
задан 29.11.2019, 21:25
1 ответ

Желанный снова в espaГ±ol, я надеюсь смочь помогать тебе StackOverflow, и тебе благодарен позволь мне иметь, что он существует mГЎs одной soluciГіn в то же требование.

, Чтобы начинаться, я буду упрощать немного твой компонент, что estГЎ в классе, чтобы это выдвигать как функциональный компонент с hooks, так как точно, они уменьшают boilerplate и открывают большие новые возможности.

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>
    )}
}

, Поскольку ты можешь видеть, я перемещаю apiUrl и ее funciГіn, чтобы манипулировать click агента, в props компонента, она funciГіn handleClick ты можешь объявлять ее в том же самом mГіdulo, или внутри той же самой funciГіn. Из-за этого demГЎs она lГіgica он idГ©ntica. hooks, что мы используем звук useEffect и useState

ВїAhora, quГ© выборы, мы имеем, чтобы показывать сообщение ожидания?

Первая и mГЎs простая он состоит в том, чтобы менять она expresiГіn действующий тройной от tickets.length && ${jsx} до одного год, сравнивая против tamaГ±o array tickets, quedarГ - во что-то asГ-:

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

HabГ - В жениха в комментариях, использовать Suspense, но пока, только estГЎ в producciГіn для компонентов, которые загружаются в требовании React.lazy. Тем не менее в будущем prГіximo может быть одной soluciГіn aГєn mГЎs просто, что вручную проверять данные, которые у нас есть в state нашего компонента: https://reactjs.org/docs/concurrent-mode-suspense.html

Тем не менее давайте видеть другую opciГіn, как манипулировали грузом внешних данных, и управлением ошибки, с одним patrГіn очень интересно и bГЎsico, и что ты permitirГЎ делать mГЎs testeable твои компоненты. Простой patrГіn Контейнер - PresentaciГіn (или smart vs dumb).

В этом мы отделяем ее lГіgica возвращения данных, ее presentaciГіn, bГЎsicamente твой компонент presentaciГіn не знает, откуда к нему прибывают данные, или сообщение ошибки, или она funciГіn, которым манипулирует click в линию, совсем не, только получает и представляет данные и перемещает события в нее funciГіn, что манипулирует информацией, - чистый вид.

И с другой стороны, у тебя есть контейнер, который манипулирует ею lГіgica и перемещает их в нее 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>)
}

patrГіn presentaciГіn - контейнер, позволяет тебе доставать ее lГіgica вида, даже большей комплексности и манипулировать другими случаями ее lГіgica состояния, например делать оспоримым обещание fetch Axios, или другие librerГ-схвати, предотвращая asГ - ошибки из-за того, что перемещая данные (встречается случай с setState в компонентах класса tambiГ©n) в компоненты, которые уже демонтировались.

0
ответ дан 01.12.2019, 10:39

Теги

Похожие вопросы