javascript - 通过 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; });
}