Отображение массива объектов в React Native Expo - PullRequest
Новая
       4

Отображение массива объектов в React Native Expo

0 голосов
/ 02 августа 2020

У меня есть требование, которое будет отображать сведения об офисе пользователя. Однако я получаю сообщение об ошибке «Невозможно прочитать карту свойств undefined» при выполнении цикла office_details с использованием карты. В моей консоли office_details есть значение - см. Снимок экрана ниже. Код ниже не работает. В firebase office_details является массивом. 

 { this.props.singleConsultant.office_details.map(({ office_days, office_hour_from, office_hour_to },i ) => (
        <View key={i}>
          {office_days.map((office_day, j) =>  <Text key={j}>{office_day}</Text>) }
          
        </View>
      ) )
  }

import { Text, View, ScrollView, Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import StarRating from 'react-native-star-rating';
import { profileStyles, globalStyles } from '../styles/styles';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {  getConsultant } from '../actions/consultant';
class ProfileTab extends Component {
  
  constructor(props){
    super(props);

  
  }
  
  Edit = () => {
    const navigation = this.props.navigation();
    navigation.navigate('EditProfile_1');
  } 
  
  List({items, fallback}){
    if(!items || items.length === 0){
      return fallback
    }else{
      return items.map( item => {
        return <View style={profileStyles.profile_hours_details}>
                <Text> {items.office_location} {"\n"}
                        {item.office_hour_from} - {item.office_hour_to}
                        
                </Text>
              </View>
      })
    }

  }


  render(){
    // if(this.props.singleConsultant){
    //   var user = this.props.singleConsultant;
    //   if(user.office_details){
    //     var office_details = user.office_details;
    //   }
    // }
  
  //const user = Array.from(this.props.singleConsultant);
    const user = this.props.singleConsultant;

    //user.office_details = [];
    
    //const user = ([])
    
    //const officeDetails = user.office_details;
    console.log("Profile ab na ni");
    console.log(this.props.singleConsultant);
    //console.log(user);
    
    //console.log(this.props.singleConsultant);
    //console.log(user.office_details);
    
    // const office = Array.from(user.office_details);
    //console.log(user.data());
    
    return (
      
    <View style={profileStyles.container}>
         
    <View style={profileStyles.header_container}>
 <View style={profileStyles.header_text_container}>
 <Text style={profileStyles.header_text_bold}>MY PROFILE: {user.fullName} </Text>
 </View>
</View>
<View style={profileStyles.scaffold}>
 <View style={profileStyles.profile_container}>
   <ScrollView
     showsVerticalScrollIndicator={false}
     contentContainerStyle={{
       padding: 14,
       marginTop: 10,
       borderRadius: 15,
       backgroundColor: '#fff',
     }}
   >
     <View style={profileStyles.profile_officeimg_container}>
       <Image
         source={user.profilePicture}
         style={profileStyles.profile_officeimg}
       />
     </View>
     <View style={profileStyles.profile_b_info_container}>
       <Text style={profileStyles.profile_b_info_header}>Basic Information</Text>
       <View style={profileStyles.profile_b_info_details_container}>
         <View style={profileStyles.profile_b_info_profileimg_container}>
           <Image
             source={user.profilePicture}
             style={profileStyles.profile_b_info_profileimg}
           />
         </View>
         <View style={profileStyles.profile_b_info_details}>
           <Text >
             Specialty: {user.userSpecialty} 
             Name: {user.fullName} {"\n"}
             Email: {user.email}{"\n"}
             Mobile Number: {user.mobileNumber}
           </Text>
         </View>
       </View>
     </View>
     <View style={profileStyles.profile_rating_container}>
       <Text style={profileStyles.profile_rating_header}>Overall Rating</Text>
       <View style={profileStyles.profile_rating_details}>
         <StarRating
           disabled={true}
           maxStars={5}
           rating={4}
           selectedStar={() => { }}
           fullStarColor='#FDBB3B'
           starSize={12}
           starStyle={{}}
         />
       </View>
     </View>
     <View style={profileStyles.profile_hours_container}>
       <Text style={profileStyles.profile_hours_header}>Office Hours</Text>
       <View style={profileStyles.divider} />
{ this.props.singleConsultant.office_details.map(({ office_days, office_hour_from, office_hour_to },i ) => (
        <View key={i}>
          {office_days.map((office_day, j) =>  <Text key={j}>{office_day}</Text>) }

        </View>
      ) )
  }
      
       <View style={profileStyles.profile_hours_details}>
         <Text>
           Manila, Philippines 321 St. xab Bldg.{"\n"}
           Saturday, Monday, Friday{"\n"}
           7:30 AM - 11:00 PM
         </Text>
       </View>
       <View style={profileStyles.profile_hours_details}>
         <Text>
           Manila, Philippines 111 St. xxx Bldg.{"\n"}
           Sunday, Wednesday, Friday{"\n"}
           9:00 AM - 1:30 PM
         </Text>
       </View>
     </View>
     <View style={profileStyles.divider} />
     <TouchableOpacity
       activeOpacity={0.6}
       style={profileStyles.edit_button}
       onPress={this.Edit}
     >
       <Text style={profileStyles.edit_button_label}>Edit Profile</Text>
     </TouchableOpacity>
     <View style={profileStyles.review_container}>
       <Text style={profileStyles.review_header}>Reviews</Text>
       <View style={profileStyles.review_details}>
         <View style={profileStyles.review_details_header}>
           <Text style={profileStyles.review_details_label}>By John Doe</Text>
           <View style={{ alignSelf: 'flex-start' }}>
             <StarRating
               disabled={true}
               maxStars={5}
               rating={3}
               selectedStar={() => { }}
               fullStarColor='#FDBB3B'
               starSize={12}
               starStyle={{ marginRight: 5 }}
             />
           </View>
         </View>
         <Text style={profileStyles.review_details_text}>
           Bacon ipsum dolor amet flank corned beef pancetta picanha, strip steak pork chop tri-tip ball tip. Capicola bresaola shoulder pork belly pastrami strip steak kevin tenderloin tri-tip ham hock. Meatloaf t-bone biltong meatball. Ball tip drumstick jowl bacon, chislic pig picanha frankfurter buffalo ground round shankle tail jerky.
           Jerky spare ribs rump, turducken alcatra meatball picanha pastrami swine ribeye prosciutto pork belly pork loin frankfurter. Hamburger ribeye meatloaf landjaeger brisket chuck kielbasa chicken pork belly tongue pork chop. Jerky pastrami landjaeger jowl venison, boudin capicola frankfurter drumstick rump ball tip turkey hamburger shankle. Shank sirloin tenderloin, ground round chicken pork brisket beef ribs short ribs. Fatback porchetta ham ham hock. Cupim picanha tenderloin short loin brisket ribeye jerky tail bacon shoulder bresaola chislic tongue short ribs shankle.
           Shoulder kielbasa landjaeger swine, alcatra t-bone chislic pork loin filet mignon bacon fatback salami drumstick cow. Jowl biltong ball tip turkey meatball corned beef cow spare ribs landjaeger prosciutto tri-tip. Ham pig drumstick shoulder burgdoggen. Tail strip steak turducken pig.
         </Text>
       </View>
    
     </View>
   </ScrollView>
 </View>
</View>
</View>

    );
 }
}


const mapDispatchToProps = dispatch => {
  return bindActionCreators({ getConsultant}, dispatch)
}
const mapStateToProps = state => {
    return {
    user : state.user,
    consultant: state.consultant,
    singleConsultant: state.singleConsultant
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(ProfileTab);
//export default HomeClient;
[See screenshot here][1]


  [1]: https://i.stack.imgur.com/59Cyk.png

1 Ответ

0 голосов
/ 02 августа 2020

Удалите 's' из "office_days" (в первом сопоставлении)

...