Question

嘿，我正在尝试渲染一些卡片，例如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()
  }

此功能渲染卡片

Answer 1

任何异步操作都需要时间才能解决...如果您想使用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应该不再使用

在执行某些任务之前进行本机等待

1 个答案: