Как использовать функцию отображения в наблюдаемом состоянии Mobx? - PullRequest
Новая
       26

Как использовать функцию отображения в наблюдаемом состоянии Mobx?

0 голосов
/ 27 марта 2019

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

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

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

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;

К счастью, это хранилище может импортировать полный документ из пожарного хранилища.Я проверял это с console.log.

Итак, кто-то знает, как полностью использовать функцию map для состояния mobx?

...