在 React Native Expo 中显示对象数组

Question

我有一个显示用户办公室详细信息的需求。但是，在使用 map 循环 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

Answer 1

从“office_days”中删除“s”（在第一个映射中）