React-Native：解析简单 JSON GET/POST 并每 X 秒刷新一次

Question

从 JSON 响应中获取数据并填充一个字段并每 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 将在 station=WTRU

上与 GET OR POST 一起使用

Answer 1

以下方法可能会派上用场。以下示例使用 JavaScript 的 setInterval 每 5 秒从 API 中获取数据。一旦组件首次呈现，我们就在 componentDidMount 方法中发出请求，并在组件卸载后删除间隔 componentWillUnmount。

您需要使用 state 操作在每 x 秒后的每个 api 请求后更新您的屏幕。由于每次状态更新都会导致重新渲染。

沙盒Link：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>
    );
  }
}

React-Native：解析简单 JSON GET/POST 并每 X 秒刷新一次

React-Native: Parsing Simple JSON GET/POST and Refresh every X Seconds

json

polling

react-native