javascript - 使用数组中的 .map() 进行配置。从 Firebase 获取数据并在 React Native 中以类似火种的卡片视图输出

Question

在这里，我从 firebase 获取数据，然后尝试以类似火种卡的格式输出数据。我的代码如下 -

import React from 'react';
import { View, ImageBackground, Text, Image, TouchableOpacity } from 'react-native';
import CardStack, { Card } from 'react-native-card-stack-swiper';
import City from '../components/City';
import Filters from '../components/Filters';
import CardItem from '../components/CardItem';
import styles from '../assets/styles';
import Demo from '../assets/demo';;
import {db} from '../config/config';





class Home extends React.Component {
  constructor (props) {
    super(props);

    this.state = ({
      items: [],
      isReady: false,
    });
  }

  componentWillMount() {
  let items = [];
    db.ref('cards').once('value', (snap) => {
      
    snap.forEach((child) => {
      let item = child.val();
      item.id = child.key;
      items.push({
        name: child.val().pet_name,
        description: child.val().pet_gender,
        pet_age: child.val().pet_age,
        pet_breed: child.val().pet_breed,
        photoUrl: child.val().photoUrl, 
      }); 
      
    });
    //console.log(items)   
   
    this.setState({ items: items, isReady: true });
    console.log(items);
  
  });
  }

  componentWillUnmount() {
    // fix Warning: Can't perform a React state update on an unmounted component
    this.setState = (state,callback)=>{
        return;
    };
  }

  render() {
    return (
      <ImageBackground
        source={require('../assets/images/bg.png')}
        style={styles.bg}
      >
        <View style={styles.containerHome}>
          <View style={styles.top}>
            <City />
            <Filters />
          </View>
  
          <CardStack
            loop={true}
            verticalSwipe={false}
            renderNoMoreCards={() => null}
            ref={swiper => {
              this.swiper = swiper
            }}
          >
            {this.state.items.map((item, index) => (
              <Card key={index}>
                <CardItem
                  //image={item.image}
                  name={item.name}
                  description={item.description}
                  actions
                  onPressLeft={() => this.swiper.swipeLeft()}
                  onPressRight={() => this.swiper.swipeRight()}
                />
              </Card>
            ))}
          </CardStack>
        </View> 
      </ImageBackground>
    ); 
  }
}


export default Home;

我正在获取数据并将其存储在一个名为 items[] 的数组中。Console.log(items)给我以下结果：

Array [
  Object {
    "description": "male",
    "name": "dawn",
    "pet_age": "11",
    "pet_breed": "golden retriever",
    "photoUrl": "picture",
  },
  Object {
    "description": "Male",
    "name": "Rambo",
    "pet_age": "7",
    "pet_breed": "German",
    "photoUrl": "https://firebasestorage.googleapis.com/v0/b/woofmatix-50f11.appspot.com/o/pFkdnwKltNVAhC6IQMeSapN0dOp2?alt=media&token=36087dae-f50d-4f1d-9bf6-572fdaac8481",
  },
]

此外，我想将我的数据输出到类似 Outlook 的卡片中，所以我制作了一个名为 CardItem 的自定义组件：

import React from 'react';
import styles from '../assets/styles';

import { Text, View, Image, Dimensions, TouchableOpacity } from 'react-native';
import Icon from './Icon';

const CardItem = ({
  actions,
  description,
  image,
  matches,
  name,
  pet_name,
  pet_gender,
  pet_age,
  onPressLeft,
  onPressRight,
  status,
  variant
}) => {
  // Custom styling
  const fullWidth = Dimensions.get('window').width;
  const imageStyle = [
    {
      borderRadius: 8,
      width: variant ? fullWidth / 2 - 30 : fullWidth - 80,
      height: variant ? 170 : 350,
      margin: variant ? 0 : 20
    }
  ];

  const nameStyle = [
    {
      paddingTop: variant ? 10 : 15,
      paddingBottom: variant ? 5 : 7,
      color: '#363636',
      fontSize: variant ? 15 : 30
    }
  ];

  return (
    <View style={styles.containerCardItem}>
      {/* IMAGE */}
      <Image source={image} style={imageStyle} />

      {/* MATCHES */}
      {matches && (
        <View style={styles.matchesCardItem}>
          <Text style={styles.matchesTextCardItem}>
            <Icon name="heart" /> {matches}% Match!
          </Text>
        </View>
      )}

      {/* NAME */}
      <Text style={nameStyle}>{name}</Text>

      {/* DESCRIPTION */}
      {description && (
        <Text style={styles.descriptionCardItem}>{description}</Text>
      )}

      {/* STATUS */}
      {status && (
        <View style={styles.status}>
          <View style={status === 'Online' ? styles.online : styles.offline} />
          <Text style={styles.statusText}>{pet_age}</Text>
        </View>
      )}

      {/* ACTIONS */}
      {actions && (
        <View style={styles.actionsCardItem}>
           <View style={styles.buttonContainer}>
          <TouchableOpacity style={[styles.button, styles.red]} onPress={() => {
            this.swiper.swipeLeft();
          }}>
            <Image source={require('../assets/red.png')} resizeMode={'contain'} style={{ height: 62, width: 62 }} />
          </TouchableOpacity>
          <TouchableOpacity style={[styles.button, styles.orange]} onPress={() => {
            this.swiper.goBackFromLeft();
          }}>
            <Image source={require('../assets/back.png')} resizeMode={'contain'} style={{ height: 32, width: 32, borderRadius: 5 }} />
          </TouchableOpacity>
          <TouchableOpacity style={[styles.button, styles.green]} onPress={() => {
            this.swiper.swipeRight(); 
          }}> 
            <Image source={require('../assets/green.png')} resizeMode={'contain'} style={{ height: 62, width: 62 }} />
          </TouchableOpacity>
        </View>
        </View>
      )}
    </View>
  );
};

export default CardItem;

问题是当我尝试传递items[]数组中的数据时，cardItem 组件不起作用。为了试运行，我使用了一个示例演示数组，当我使用演示数组时，我的组件工作得很好。我究竟做错了什么？我一直在修补这个问题很长一段时间。任何帮助将不胜感激。

标签： javascriptarraysfirebasereact-native