Сопоставить дочернее свойство объекта в массиве в React Native - PullRequest
Новая
       15

Сопоставить дочернее свойство объекта в массиве в React Native

0 голосов
/ 02 марта 2020

Я пытаюсь составить список элементов, которые загружаются с помощью API мест Google. Я без проблем получаю стандартные значения и аккуратно читаю в функции «папка», такой как item.name, но я также хочу использовать фотографии. если в моем 'componentWillMount' console.log (this.state.drinks [0] .photos [0] .photo_reference); выходной я получаю правильное значение. Однако я не могу сделать это в функции папки. там я получаю eroor: 'TypeError: undefined не является объектом (оценка' items.photos [0] ')'

Мой вопрос заключается в том, знает ли кто-нибудь, как управлять дочерним объектом объекта в функции карты ? У меня должно быть свойство 'Photos', в объекте свойство 'photo_reference'.

мой код: 

 import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, Button, ScrollView, ImageBackground, Dimensions} from 'react-native';
import { Avatar, ListItem,Tile } from 'react-native-elements';
import firebase from 'react-native-firebase';
import Icon from 'react-native-vector-icons/FontAwesome';

import Slideshow from 'react-native-image-slider-show';




const initialLayout = { width: Dimensions.get('window').width };
class horecaScreen extends Component {

  constructor(props){
    super(props);
    this.state = {
      position: 1,
      interval: null,
      dataSource: [
        {
          title: 'Restaurant Rijk Van Margraten',
          caption: 'Bemelerweg 99, Cadier en Keer',
          url: 'https://firebasestorage.googleapis.com/v0/b/adventure-time-21e7c.appspot.com/o/dummy-eijsden.jpg?alt=media&token=87534c11-1280-4f54-a273-9f23225f9ab7',
        }, {
          title: 'Golfbaan het Rijk van Margraten',
          caption: 'Bemelerweg 99, Cadier en Keer',
          url: 'https://firebasestorage.googleapis.com/v0/b/adventure-time-21e7c.appspot.com/o/golfbaan-eijsden-margraten.jpg?alt=media&token=1cf1d9bf-5b63-4b51-8f68-1dd3df870af4',
        }, {
          title: 'Restaurant Rijk Van Margraten',
          caption: 'Bemelerweg 99, Cadier en Keer',
          url: 'https://firebasestorage.googleapis.com/v0/b/adventure-time-21e7c.appspot.com/o/dummy-eijsden.jpg?alt=media&token=87534c11-1280-4f54-a273-9f23225f9ab7',
        },
      ],
      drinks: [],
    }
  }


getUserData = (user) => {
  console.log(user);
  let ref = firebase.database().ref('Users/' + user);
  ref.on('value' , snapshot =>{
      var state = snapshot.val();
      this.setState({
        index: 0,
        routes:[
          {key: 'first', title: 'First'},
          {key: 'second', title: 'Second'}
        ]
      })
    })

}

photosPlaces = [];
drinksPlaces = [];

  componentWillMount(){
    let user = firebase.auth().currentUser;
    console.log(user);
    this.getUserData(user.uid); 
    let url = 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=50.97648620605469,5.780409336090088&radius=2000&type=bar&key=<API KEY>';
        fetch(url)
            .then((response) => response.json())
            .then((JsonResponse) => {
                // console.error(JsonResponse)
               console.log(JsonResponse.results)  

                this.setState({
                  drinks:  JsonResponse.results,
                })


                //console.log(this.state.drinks[0].photos[0].photo_reference);
            })
            .catch((error) => {
                alert('error')
            });


  }





  render() {


      return (


        <ScrollView style={styles.container}>
        <Slideshow 
        dataSource={this.state.dataSource}
        position={this.state.position}
        onPositionChanged={position => this.setState({ position })} 
        titleStyle={{color: 'white', fontWeight: 'bold'}}
        captionStyle={{color: 'white'}}
        arrowSize={0}
        onPress={({ index }) => this.props.navigation.navigate('HorecaDetail', {indexID: index})}
        />


        <View style={styles.Tiles}>
          <View style={styles.activity}> 
            <Text style={styles.activityText}>Iets drinken in de buurt?</Text>
            <ScrollView horizontal={true}>


                {
         this.state.drinks.length > 0 && this.state.drinks.map((item, i) =>(
            <View style={styles.listRow}>

              <ImageBackground source={{uri:'https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=' + item.photos[0].photo_reference + '&key=<API KEY>'}} style={{width: 140, height: 200, justifyContent: 'flex-end',paddingBottom: 10, paddingLeft: 10, borderRadius: 250 }}>
                <Text style={styles.insideText}>{item.name}</Text>
              </ImageBackground>
            </View>
          ))
        }


          </ScrollView>
          </View>
          </View>

          <View style={styles.Tiles}>
          <View style={styles.activity}> 
            <Text style={styles.activityText}>Iets eten in de buurt?</Text>
            <ScrollView horizontal={true}>
          <View style={styles.listRow}>
            <View style={styles.LeftColumn}>
            <ImageBackground source={require('../assets/images/all/dummy-location.png')} style={{width: 140, height: 200, justifyContent: 'flex-end',paddingBottom: 10, paddingLeft: 10, borderRadius: 250 }}>
               <Text style={styles.insideText}>Bedrijf A</Text>
              </ImageBackground>
            </View>
            <View style={styles.RightColumn}>
            <ImageBackground source={require('../assets/images/all/dummy-location.png')} style={{width: 140, height: 200, justifyContent: 'flex-end',paddingBottom: 10, paddingLeft: 10 , marginLeft: 5,}}>
               <Text style={styles.insideText}>Bedrijf B</Text>
              </ImageBackground>
              </View>
          </View>
          <View style={styles.listRow}>
            <View style={styles.LeftColumn}>
            <ImageBackground source={require('../assets/images/all/dummy-location.png')} style={{width: 140, height: 200, justifyContent: 'flex-end',paddingBottom: 10, paddingLeft: 10, borderRadius: 250 }}>
               <Text style={styles.insideText}>Bedrijf A</Text>
              </ImageBackground>
            </View>
            <View style={styles.RightColumn}>
            <ImageBackground source={require('../assets/images/all/dummy-location.png')} style={{width: 140, height: 200, justifyContent: 'flex-end',paddingBottom: 10, paddingLeft: 10 , marginLeft: 5,}}>
               <Text style={styles.insideText}>Bedrijf B</Text>
              </ImageBackground>
              </View>
          </View>
          </ScrollView>
          </View>
          </View>



          <View style={styles.bottomSpace}>

          </View>

        </ScrollView>

  );

}
  }

  const styles = StyleSheet.create({
    profileName:{
      fontWeight: 'bold',
      fontSize: 22,
      marginTop: 20,
    },
    list:{
      marginTop: 40,
      width: '100%'
    },
    scene: {
        flex: 1,
      },
    listRow:{
      flex: 1,
      flexDirection: 'row',
      flexWrap: 'wrap',
      alignItems: 'flex-start',
      paddingTop: 10,
      marginTop: -20,
      marginRight: 10
    },
    LeftColumn:{
      width: '50%',
      borderRadius: 250
    },
    RightColumn:{
      width: '50%',
    },
    Tiles:{
      padding: 10,

      marginTop: 20
    },
    insideText:{
      color: 'white',
      bottom: 0,
      alignContent: 'flex-end',
      fontWeight: 'bold'
    },
    bottomSpace:{
      padding: 10,
      marginTop: 30
    },
    Slideshow:{
      color: 'white'
    },
    activityText:{
      fontWeight: 'bold',
      fontSize: 18,
      marginBottom: 10,
    },
    iconOverview:{
      fontSize: 15,
      paddingRight: 120
    }
  })



  export default horecaScreen;

вывод из выборки: enter image description here

1 Ответ

0 голосов
/ 02 марта 2020

Метод жизненного цикла ComponentWillMount () устарел и небезопасен для использования. Вместо этого используйте ComponentDidMount ().

Приходите к вашей ошибке: 'Ошибка типа: undefined не является объектом (оценивает' items.photos [0] ')'

Попробуйте сделать: 

{
         this.state.drinks.length > 0 && this.state.drinks.map((item, i) =>(
            <View style={styles.listRow}>

              <ImageBackground source={{uri:'https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=' + item.photos[0].photo_reference + '&key=MY_API_KEY'}} style={{width: 140, height: 200, justifyContent: 'flex-end',paddingBottom: 10, paddingLeft: 10, borderRadius: 250 }}>
                <Text style={styles.insideText}>{item.name}</Text>
              </ImageBackground>
            </View>
          ))
        }
...