Obtenga datos de JSON Response y complete un campo y actualice cada X Seconds. No tiene que ser una tarea en segundo plano, solo mientras la pantalla está activa.

Las respuestas serían: res.name y res.host. También cargaría la imagen actual: res.imgurl

Probé el código a continuación, pero los ejemplos en el sitio de reacción son bastante complejos y usan listas, solo tengo datos JSON simples, sin matriz.

import { StyleSheet, Text, View } from 'react-native';

export default function App() {

  fetch("https://broadcast.truthnetwork.com/play-currentshow.lasso?station=WTRU")
    .then(res => res.json())
    .then(res => {
      console.log("Server response :- \n", res);
  })
    .catch(error => {
      console.log("Error from server :- \n", error);

  });

  return (
    <View style={styles.container}>
      <Text style={styles.sometext}>Show Name:</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { 
    flex: 1,
    backgroundColor: '#375963',
    alignItems: 'center',
    justifyContent: 'center',
  },
  sometext: {
    color: '#ffffff'
  }
});

Aquí hay una respuesta JSON de muestra:

{
"name": "Encouraging Word", 
"imgurl": "https://broadcast.truthnetwork.com/_img/shows300/4B0FA4EA116331D9A1WH3AE062F0.jpg", 
"description": "This is a simple description", 
"slug": "encouraging-word-don-wilton", 
"weburl": "http://www.theencouragingword.org/", 
"feedurl": "http://feeds.feedburner.com/tewfbs", 
"host": "Don Wilton", 
"showid": "69"
}

Espero que la aplicación extraiga JSON y muestre el programa actual, muestre la imagen y muestre el host y actualice los datos cada 15-30 segundos (no es necesaria una tarea en segundo plano, solo mientras la pantalla está activa).

Nota: Esta API funcionará con GET O POST en station = WTRU

-1
Marc Pope 29 oct. 2019 a las 21:29

1 respuesta

La mejor respuesta

El siguiente enfoque puede resultar útil. El siguiente ejemplo obtiene datos de una API cada 5 segundos usando JavaScript setInterval. Realizamos la solicitud una vez que el componente se procesa por primera vez, en el método componentDidMount y eliminamos el intervalo una vez que el componente se desmonta dentro de componentWillUnmount.

Debe utilizar la manipulación de estado para actualizar su pantalla después de cada solicitud de API después de cada x segundos. Dado que cada actualización de estado provoca una re-renderización.

Enlace de zona de pruebas: https://codesandbox.io/s/falling- pine-81hx4? fontsize = 14

Lea más sobre setInterval aquí: https: // developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {

  state = {
    data: {}
  } 

  componentDidMount() {
    this.getData();
    this.interval = setInterval(() => {
      this.getData();
    }, 5000);
  }

  getData = () => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json())
    .then(json => {
      console.log(json);
      this.setState({ data: json })
    })
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div className="App">
        <p>{this.state.data.title}</p>
      </div>
    );
  }
}
1
Rohit Kashyap 29 oct. 2019 a las 18:48