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>
      );
  }
}

React Native组件中的长网络操作

2 个答案: