Блог

Теперь я хотел бы использовать функцию Map для отображения компонента с каждым массивом.

Но мой код с map работает некорректно. В firestore в коллекции «еда» есть 3 документа, но эта функция map может отображать только один документ.

Это мой код ниже в компоненте рендеринга.

 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>
      );
    });
  }
  

В дополнение к этому, я установил компонент store в своем проекте.
Приведенный выше код импортирует наблюдаемое состояние (массив) из этого хранилища.

Ниже приведено это хранилище.

 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?