React-Native: парсинг простого JSON GET / POST и обновление каждые X секунд - PullRequest
Новая
       6

React-Native: парсинг простого JSON GET / POST и обновление каждые X секунд

0 голосов
/ 29 октября 2019

Получить данные из JSON Response, заполнить поле и обновлять каждые X секунд. Это не должно быть фоновой задачей, только когда экран активен.

Ответы будут: res.name и res.host. Также будет загружено текущее изображение: res.imgurl

Я пробовал приведенный ниже код, но примеры на сайте реакции довольно сложны и используют списки, у меня просто простые данные JSON, без массива. 

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

Вот пример ответа JSON: 

{
"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"
}

Я ожидаю, что приложение будет извлекать JSON и показывать текущее шоу, показывать изображение и показывать хост и обновлять данные каждые 15-30 секунд (фоновая задача не требуется, только когда экран активен).

Примечание: этот API будет работать с GET OR POST на станции = WTRU

1 Ответ

1 голос
/ 29 октября 2019

Может пригодиться следующий подход. Следующий пример извлекает данные из API каждые 5 секунд, используя JavaScript setInterval. Мы делаем запрос, как только компонент сначала рендерится, методом componentDidMount и удаляем интервал, как только компонент размонтирует внутри componentWillUnmount.

Вам необходимо использовать манипуляции state для обновления экрана после каждого запроса API через каждые x секунд. Поскольку каждое обновление состояния вызывает повторную визуализацию.

Ссылка в песочнице: https://codesandbox.io/s/falling-pine-81hx4?fontsize=14

Подробнее о setInterval здесь: 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>
    );
  }
}
...