Блог

Я новичок в react native, я хочу использовать цикл for для отображения нескольких данных. который получен с предыдущего экрана из API. вот мой код. Я хочу показать полное представление возврата в цикле for несколько раз. Я получаю данные в this => неопределенный не является объектом (вычисление ‘this.props.route.params.lead_tag_number.data’)

  class Browse extends Component {
  
    
constructor(props) {
  super(props);
  this.state ={
    Email:"",
  }
  this.handleBackButtonClick = this.handleBackButtonClick.bind(this);  
}

componentDidMount() {
   BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
   
}

componentWillUnmount() {
  BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
}

handleBackButtonClick() {
  this.props.navigation.navigate("Browse");
  return true;
}

  state = {
    categories: [],
    error: [],
  };

  renderTab(tab) {
    const { active } = this.state;
    const isActive = active === tab;

    return (
      <TouchableOpacity
        key={`tab-${tab}`}
        onPress={() => this.handleTab(tab)}
        style={[styles.tab, isActive ? styles.active : null]}
      >
        <Text size={16} medium gray={!isActive} secondary={isActive}>
          {tab}
        </Text>
      </TouchableOpacity>
    );
  }

 render() {
     const { profile, navigation } = this.props;
     const tabs = [""];
     const route = this.props

for (let i = 0; i < this.props.route.params.data.length; i  ) {
        
    return ( 



        <View style={{alignItems:"center", justifyContent:"center", }}>

    
        <View style={styles.header}>
               <Ionicons style={{paddingRight:290}} name="arrow-back" size={40} 
              color="black"  onPress={() => navigation.navigate("Browse")} />
 </View>
              <Block>
                <Block flex={false} row center space="between" style={styles.header}>

  <Entypo style={{marginLeft:250}} onPress={() => this.props.navigation.toggleDrawer()} name="menu" size={30} color="black" />
                </Block>
                <Block flex={false} row style={styles.tabs}>
                  {tabs.map((tab) => this.renderTab(tab))}
                </Block>
                </Block>

<View style={{alignItems:"center", justifyContent:"center",height:140, width:"90%", marginTop:30}}>

 <TouchableOpacity onPress={() => navigation.navigate("FormItems")}>
                  <Card center middle shadow style={{ height:80, width:"100%" }} >
                  <Text medium height={15} size={14}style={{ fontWeight: "bold", paddingRight:190}}>
        
                      
                            {this.props.route.params.lead_tag_number.data[i]}

 </Text>

   </Card>
                            </TouchableOpacity>

  </View>
                  </View>
   )
    }
}
  }
 

Возможно, это проблема с вашим циклом for, потому что вы используете цикл for с params.data

для (пусть i = 0; i < this.props.route.params.data.length; i )

и получить доступ к данным с помощью params.lead_tag_number.data

this.props.route.params.lead_tag_number.data[i]

Но это неправильный способ отображения нескольких данных, которые вы можете отобразить с помощью функции map, подобной этой

         render() {
                 const { profile, navigation } = this.props;
                 const tabs = [""];
                 const route = this.props
           
                return ( 
            
                    <View style={{alignItems:"center", justifyContent:"center", }}>            
                    <View style={styles.header}>
                           <Ionicons style={{paddingRight:290}} name="arrow-back" size={40} 
                          color="black"  onPress={() => navigation.navigate("Browse")} />
                    </View>
                          <Block>
                            <Block flex={false} row center space="between" style={styles.header}>
            
              <Entypo style={{marginLeft:250}} onPress={() => this.props.navigation.toggleDrawer()} name="menu" size={30} color="black" />
                            </Block>
                            <Block flex={false} row style={styles.tabs}>
                              {tabs.map((tab) => this.renderTab(tab))}
                            </Block>
                            </Block>
    
    
     {/*Use map on data as you want to show*/}
            {this.props.route.params.data.map(item => 
         <View style={{alignItems:"center", justifyContent:"center",height:140, width:"90%", marginTop:30}}>
            
             <TouchableOpacity onPress={() => navigation.navigate("FormItems")}>
                              <Card center middle shadow style={{ height:80, width:"100%" }} >
             {/*Use item*/}
             <Text medium height={15} size={14}style={{ fontWeight: "bold", paddingRight:190}}>  
             {item} 
             </Text>
         
               </Card>
               </TouchableOpacity>
              </View>
        )}
       </View>
               )
                }