Question

我正在从API到平面列表中获取数据，并且可以正常工作，因为它不是实时获取的问题，我必须刷新屏幕才能看到最近添加的数据。我该如何实时获取数据。

export default class CategoryScreen extends Component {
constructor(props) {
super(props);
this.state = {
  categories: []
}

}

componentWillMount() {

//Fetch recent products
const url = url
fetch(url)
  .then((response) => response.json())
  .then((responseJson) => {
    this.setState({
      categories: responseJson.categories
    })
  })


}
 rederItem = ({ item }) => {
return (
  <CategoryFlatList title={item.cat_name} image={item.img}/> 
)
}

render() {

return (
  <SafeAreaView style={{ flex: 1 }}>
    <FlatList style={{}}
          data={this.state.categories}
          renderItem={this.rederItem}
          numColumns={2}
          keyExtractor={item => item.id}
        />

    </SafeAreaView>

);
}
 }

Answer 1

如果我正确理解了您的问题，则需要在服务器上更改数据后刷新数据！在这种情况下，未在列表上进行更新的原因导致您未调用fetch，当您刷新屏幕时，将调用fetch并更新数据。

有多种解决方案可以解决此问题：

通过创建一种机制来订阅数据源并在数据发生更改时进行更新的高级功能。
更新有关用户互动（如滑动）的数据。
使用计时器调用提取并更新状态的更简单方法（但不是专业方法）。

Answer 2

您可以执行以下操作：

1）建立PubSub机制

2）使用拉动刷新FlatList

3）使用轮询，您可以使用Redux-Sagas或Redux-Observable（这是首选方法）进行轮询，也可以使用类似这样的计时器来进行

这是开始间隔的方式

this.intervalID = setInterval(() => {
        // do something
      }, 5000) //time for polling in millies

这是停止间隔的方法

if (this.intervalID != null) {
      clearInterval(this.intervalID)
      this.intervalID = null
    }

反应本地实时问题

2 个答案: