Question

我正在开发React Native应用程序。我想在React Native元素卡中动态显示Firebase中的数据。我设法将Firebase中的数据存储在阵列中。我想在卡中显示该数据。并且卡应根据数据库中的数量动态复制。

这是我的代码：

import React from 'react';
import { StyleSheet, Text, View, StatusBar, Image, ScrollView, TouchableOpacity, SafeAreaView, TextInput } from 'react-native';
import { Card, ListItem, Button, Icon } from 'react-native-elements';
import { styles } from './Css';

import * as firebase from 'firebase';

var itm = [];
export default class SuperMarket1 extends React.Component {
  constructor (props) {
    super(props);

    this.state = ({
      items: []
    });
  }
  componentDidMount () {
    //= =======================================
    firebase.database().ref('/products/').on('value', (snap) => {
      let items = [];
      snap.forEach((child) => {
        items.push({
          title: child.val().title,
          price: child.val().price,
          description: child.val().description,
          offerTime: child.val().offerTime,
          offerDate: child.val().offerDate,
          category: child.val().category,
          outlet: child.val().outlet,
          location: child.val().location,
          postedDate: child.val().postedDate,
          postedTime: child.val().postedTime,
          boughtDates: child.val().boughtDates,
          quantity: child.val().quantity
        });
        //  console.log(child.val().title)
        //  console.log(child.val().price)
        //  console.log(child.val().description)
      });
      itm = items;
      () => this.setState({ items: items });
      console.log(itm);
      console.log('itemstate ' + this.state.items);
      itm.forEach((itms) => {
        console.log('title*' + itms.title);
      });
    });
    //= ========================================
  }

  render () {
    return (
      <SafeAreaView style={styles.first}>
        <ScrollView horizontal={true} style={styles.twenty8}>
          <TouchableOpacity>
            <Card >
              {
                this.state.items.map((u, i) => {
                  return (
                    <View key={i} style={styles.part2}>
                      <Image
                        style={styles.image}
                        resizeMode="cover"
                        source={{ uri: u.avatar }}
                      />
                      <Text style={styles.name}>{u.title}</Text>
                      <Text>{u.description}</Text>
                    </View>
                  );
                })
              }
            </Card>
          </TouchableOpacity>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

Answer 1

() => this.setState({ items: items });

您在这里声明了一个函数，该函数在任何时候都不会执行。尝试this.setState({ items: items });

如何在React Native元素卡上显示Firebase中的数据

1 个答案: