通过React Native中的助手功能发送状态更新

Question

我在以下屏幕上调用助手函数pouchDB_helper.sync()来为我收集一堆数据。

目的是能够记录函数当前所在的位置，以便在我的render()给出百分比或状态更新

我是新来的React / React-native，所以我不确定这是否是正确的方法。 我希望能够尽可能将其保留为辅助函数，因为我在其他领域使用了该函数，这是我实际上唯一需要状态更新的地方。

import React, { Component } from 'react';
import { ActivityIndicator, AsyncStorage, Button, StatusBar, Text, StyleSheet, View, } from 'react-native';
import * as pouchDB_helper from '../utils/pouchdb';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'flex-start',
    justifyContent: 'center',
    padding: "5%",
    backgroundColor: "#fff",
    width:"100%"
  },
  statusHeader: {
    fontSize: 18,
    fontWeight: "600",
    marginBottom: 10,
    textAlign:'center',
    width:'100%'
  }
});

type Props = {};
export default class SyncScreen extends Component<Props> {

  static navigationOptions = {
    title: 'Syncing Settings',
  };

  render() {

    pouchDB_helper.sync().then((response) => {
      //IT'S DONE
    }, (error) => { alert("THERE WAS AN ERROR"); });

    return (
      <View style={styles.container}>
        <Text style={styles.statusHeader}>Syncing, please wait..</Text>
        <Text>WHERE I WANT TO CHANGE TEXT</Text>
      </View>
    );
  }
}

---

pouchDB_helper示例

注意：这仅是示例。 我知道.get()不会花很长时间来保证一个状态，但是我只是想了解这个概念。

import React from 'react';
import { AsyncStorage } from 'react-native';
import PouchDB from 'pouchdb-react-native'

export async function sync() {

    const company_id = await AsyncStorage.getItem('company_id');
    const device_db = new PouchDB(company_id, {auto_compaction: true});

    //STATUS UPDATE 1

    return device_db.get("settings").then((s) => {

      //STATUS UPDATE 2

      return device_db.get("get_this").then((s) => {

        //STATUS UPDATE  3

        return device_db.get("get_that").then((s) => {

          //STATUS UPDATE 4

        }, (error) => { return false; });

      }, (error) => { return false; });

    }, (error) => { return false; });
}

Answer 1

一种简单的方法是将一个函数传递给同步函数，该函数可以更改状态并在组件上设置所需的文本。

例

constructor(props) {
  super(props);
  this.state = {
    level: 'some init value'
  };
}

onChangeState = (level) => {
  this.setState({level});
}

componentDidMount() {
  pouchDB_helper.sync(this.onChangeState).then((response) => {
    //IT'S DONE
    this.onChangeState('Finished');
  }, (error) => { alert("THERE WAS AN ERROR"); });
}

render() {
  return (
    <View style={styles.container}>
      <Text style={styles.statusHeader}>Syncing, please wait..</Text>
      <Text>{`Current level is ${this.state.level}`}</Text>
    </View>
  );
}

---

export async function sync(changeState) {

    const company_id = await AsyncStorage.getItem('company_id');
    const device_db = new PouchDB(company_id, {auto_compaction: true});

    //STATUS UPDATE 1
    changeState(1);
    return device_db.get("settings").then((s) => {

      //STATUS UPDATE 2
      changeState(2);
      return device_db.get("get_this").then((s) => {

        //STATUS UPDATE  3
        changeState(3);
        return device_db.get("get_that").then((s) => {

          //STATUS UPDATE 4
          changeState(4);
        }, (error) => { return false; });

      }, (error) => { return false; });

    }, (error) => { return false; });
}