Блог

Эй, я пытаюсь отобразить некоторые карты, такие как tinder, чтобы это работало, но только когда я использую данные, которые уже есть в проекте, когда я пытаюсь использовать данные, которые я получаю из firebase, они не отображаются, потому что они отображают карты до получения данных из firebase, так как я могу это сделать?

Я пробовал с this.setstate, но без изменений

я получаю данные, подобные этим, и устанавливаю их в массив

 componentWillMount() {


    Users = [
    ]

    var query = firebase.database().ref("users").orderByKey();
    query.once("value")
      .then(function(snapshot) {
        snapshot.forEach(function(childSnapshot) {
          // key will be "ada" the first time and "alan" the second time
          var key = childSnapshot.key;
          // childData will be the actual contents of the child
          var childData = childSnapshot.val();
          Users.push({ id: key, uri: {uri: childData.photo} })
      });
    });
}



renderUsers = () => {

    console.log(Users)
    return Users.map((item, i) => {


      if (i < this.state.currentIndex) {
        return null
      }
      else if (i == this.state.currentIndex) {

        return (
          <Animated.View
            {...this.PanResponder.panHandlers}
            key={item.id} style={[this.rotateAndTranslate, { height: SCREEN_HEIGHT - 120, width: SCREEN_WIDTH, padding: 10, position: 'absolute' }]}>
            <Animated.View style={{ opacity: this.likeOpacity, transform: [{ rotate: '-30deg' }], position: 'absolute', top: 50, left: 40, zIndex: 1000 }}>
              <Text style={{ borderWidth: 1, borderColor: 'green', color: 'green', fontSize: 32, fontWeight: '800', padding: 10 }}>LIKE</Text>

            </Animated.View>

            <Animated.View style={{ opacity: this.dislikeOpacity, transform: [{ rotate: '30deg' }], position: 'absolute', top: 50, right: 40, zIndex: 1000 }}>
              <Text style={{ borderWidth: 1, borderColor: 'red', color: 'red', fontSize: 32, fontWeight: '800', padding: 10 }}>NOPE</Text>

            </Animated.View>

            <Image
              style={{ flex: 1, height: null, width: null, resizeMode: 'cover', borderRadius: 20 }}
              source={item.uri} />
            <Text>{item.id}</Text>
          </Animated.View>
        )
      }
      else {
        return (
          <Animated.View

            key={item.id} style={[{
              opacity: this.nextCardOpacity,
              transform: [{ scale: this.nextCardScale }],
              height: SCREEN_HEIGHT - 120, width: SCREEN_WIDTH, padding: 10, position: 'absolute'
            }]}>
            <Animated.View style={{ opacity: 0, transform: [{ rotate: '-30deg' }], position: 'absolute', top: 50, left: 40, zIndex: 1000 }}>
              <Text style={{ borderWidth: 1, borderColor: 'green', color: 'green', fontSize: 32, fontWeight: '800', padding: 10 }}>LIKE</Text>

            </Animated.View>

            <Animated.View style={{ opacity: 0, transform: [{ rotate: '30deg' }], position: 'absolute', top: 50, right: 40, zIndex: 1000 }}>
              <Text style={{ borderWidth: 1, borderColor: 'red', color: 'red', fontSize: 32, fontWeight: '800', padding: 10 }}>NOPE</Text>

            </Animated.View>

            <Image
              style={{ flex: 1, height: null, width: null, resizeMode: 'cover', borderRadius: 20 }}
              source={item.uri} />
            <Text>{item.id}</Text>
          </Animated.View>
        )
      }
    }).reverse()
  }
  

эта функция отображает карты

Любая асинхронная операция требует времени, пока она не разрешится… если вы хотите использовать setState для решения вашей проблемы… вот как:

   state = {
    users: null,
  };

  componentDidMount() {
    users = [];

    const query = firebase
      .database()
      .ref('users')
      .orderByKey();
    query.once('value').then((snapshot) => {
      // Here you users are available:

      this.setState({ users });
    });
  }

  render() {
    const { users } = this.state;
    if (!users) return null;

    return users.map(...);
  }
  

componentWillMount больше не следует использовать