Question

现在，我想使用Map函数来显示每个数组的组件。

但是，我的map代码无法正常工作。在Firestore中，“食物”集合中有3个文档，但是此地图功能只能呈现一个文档。

这是我在渲染组件中的以下代码。

renderItemBox() {
    const { store } = this.props;
    const items = store.restaurantStore.Items;
    return items.map((value, index) => {
      console.log(items);
      return (
        <TouchableOpacity key={index}>
          <View style={styles.itemsBox}>
            <View style={styles.itemsImageBox}>
              <Image
                source={require('../../assets/Images/Home/HomeListImageShop.jpg')}
                style={styles.itemsImage}
              />
            </View>
            <View style={{ flexDirection: 'row' }}>
              <Text style={styles.itemsName}>
                {value[index].name}
              </Text>
              <Text style={styles.itemsTag}>
                {value[index].tag}
              </Text>
            </View>

            <View style={{ flexDirection: 'row' }}>
              <Text style={styles.itemsDescription}>
                {value[index].shortDescription}
              </Text>
              <TouchableOpacity
                style={styles.likeButtonBox}
                onPress={this.handleLikeButton.bind(this)}
              >
                {this.handleLikeImage()}
              </TouchableOpacity>
            </View>
          </View>
        </TouchableOpacity>
      );
    });
  }

除此之外，我还在项目中设置了商店组件。上面的代码是从该商店导入可观察的状态（数组）。

下面是那家商店。

import { observable, action } from 'mobx';
import firebase from 'firebase';

class RestaurantStore {
 @observable Items = [];

 @action handleFirestoreCollectionOfFoods () {
   const db = firebase.firestore();
   db.collection('foods')
     .get()
     .then((snapshot) => {
       const preItems = [];
       snapshot.forEach((doc) => {
         const docData = doc.data();
         preItems.push(docData);
       });
       this.Items.push(preItems);
     })
     .catch((error) => {
       console.log(error);
     });
 }
}

export default RestaurantStore;

幸运的是，此存储可以从firestore导入完整的文档。我确实使用console.log进行了检查。

那么，有人知道如何使用地图功能来完全Mobx状态吗？

如何使用映射功能到Mobx可观察状态？

0 个答案: