0

Tengo una aplicación hecha en React que debería comportarse de la siguiente forma: pinta una lista de ciudades y debería alertar las que tienen problemas, para lo primero se consume un endpoint que trae todas las ciudades posible y para el segundo punto se consume otro endpoint que trae solo las ciudades que tienen problemas. Hasta ahí todo bien.

El problema es que tengo la lista de ciudades en mi state = { ciudades = [] } y mi lista de ciudades con problemas en mi state = { errores = [] }. Mi state ciudades[] lo mapeo para pintar todas las ciudades y acá es el problema, como puedo conseguir otro Array basado en mi state ciudades y state errores con el que podre actualizar la lista de ciudades para que vayan cambiando de color.

state = {
  ciudades: [],
  errores: [],
}

componentDidMount() {
window.fetch('miurl_de_ciudades').then((response) => {
  if (response.ok) {
    response.json().then(jsonStr => {
      const { datum } = jsonStr
      this.setState({ciudades: datum})
    })
  } else {
    console.log('Respuesta de red OK.')
    //this.setState({servicesState: false})
  }
})
  .catch((error) => {
    console.log('Hubo un problema con la petición Fetch:' + error.message)
    //this.setState({servicesState: false})
  })

this.timerID = setInterval(
  () => this.handleSetInterval(),
  5000
)
}

handleSetInterval() {
window.fetch('miurl_de_errores').then((response) => {
  if (response.ok) {
    response.json().then(jsonStr => {
      const { datum } = jsonStr
      this.setState({errores: datum})
    })
  } else {
    console.log('Respuesta de red OK.')
    //this.setState({monitoring: [], isLoading: false, isError: true})
  }
})
  .catch((error) => {
    console.log('Hubo un problema con la petición Fetch:' + error.message)
    //this.setState({monitoring: [], isLoading: false, isError: true})
  })
}

render() {
return (
  <div className="row">
    <div className="col s12">
      <div className="card">
          <table>
            <thead>
              <tr>
                <th>Host</th>
                <th>Service</th>
                <th>Status</th>
                <th>Last Check</th>
                <th>Status Information</th>
              </tr>
            </thead>
            <tbody>
              {this.state.ciudades.map((ciudad) => (
                <tr key={watch.id}>
                  <td>
                    <span>{ciudad.attributes.name}</span>
                    <FontAwesomeIcon icon={faClock} size="2x" className="right u-mr-1" />
                  </td>
                  <td>{watch.attributes.nameTwo}</td>
                  <td>
                    // aca deberia ir mi data de errores para poder pintar las filas o poder indicar que tiene un error con un icono.
                  </td>
                  <td>...</td>
                  <td>...</td>
                </tr>
              ))}
            </tbody>
          </table>
      </div>
    </div>
  </div>
)
}

Intente crear un nuevo Array con un Array.filter() pero no me funciono, ya que me devolvía objetos vacíos...

1 respuesta 1

0

Yo haría lo siguiente, formaría un nuevo array de objetos, de manera que pueda tener la lista completa de ciudades y una propiedad que me indique si tiene problemas o no.

const listaTotal = [...];
const listaProblemas = [...];

const listaCiudades = listaTotal.map(ciudad => {
   const status = listaProblemas.includes(ciudad);
   return { ciudad, status }
})

De esta manera obtienes una lista de esta forma:

{
  ciudad: xxxxx,
  status: true / false 
}

Y ahora en tu código puedes facilmente saber qué status tiene la ciudad y personalizar el contenido.

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.