Длинные сетевые операции в компоненте реагируют на нативные

Question

Я пытаюсь получить данные из базы данных в компоненте и хочу установить данные для компонента.я пробовал в componentDidMount () и componentWillMount () .но для загрузки данных требуется некоторое время.Я новичок, чтобы реагировать нативно и не имею никакого опыта, чтобы правильно указывать мне, где лучше всего выполнять

длинные сетевые операции. .

componentWillMount() {
    this.__fetchDataFromDB();
  }

  static navigationOptions = {
    headerTitle: "Firebase"
  };

  __fetchDataFromDB = () => {
    var usersRef = firebase.database().ref("/Users");

    usersRef.on("value", snap => {
      const result = [].concat(...Object.values(snap.val()).map(Object.values));

      this.setState({
        data: result
      });
    });
  };

спасибо

Answer 1

Вы можете сделать это

if (this.state.isLoading === true) {
            return (
                <View style={{ flex: 1, justifyContent: 'center' }}>
                   
                    <ActivityIndicator size={ Platform.OS=='android'? 90:'large'} color="#DE0400" />


                </View>
            )
        }

Когда загрузка данных завершена, setState isLoading в false. И лучше быть в componentDidMount ()

Answer 2

Попробуйте это:

class YourComponent extends React.Component {
  state = {
    data: null,
    loading: false,
  };

  fetchDataFromDB = () => {
    const usersRef = firebase.database().ref('/Users');

    usersRef.on('value', (snap) => {
      const result = [].concat(...Object.values(snap.val()).map(Object.values));

      this.setState({
        data: result,
        loading: false,
      });
    });
  };

  componentDidMount() {
    this.setState({ loading: true });
    this.fetchDataFromDB();
  }

  render() {
      const { loading, data } = this.state;

      if (loading) return <ActivityIndicator />;

      if (!data) return null;

      return (
          <View>
              {/* render your data here */}
          </View>
      );
  }
}