條件渲染不起作用ReactNativeIOSApp

我正在使用 React Native 開發 Iphone 應用程式。我想使用DataTable. 對于用戶，他們分配了特定的設備。我使用了條件渲染并為用戶正確獲取了具有指定設備的表格，但是當用戶沒有特定設備時，我希望將訊息顯示為“無設備可顯示”。下面是代碼，

管理設備.js：

    import React, {useEffect} from 'react';
    import {View,Text,StyleSheet,ScrollView} from 'react-native';
    import { HeaderButtons, Item } from 'react-navigation-header-buttons';
    import HeaderButton from '../../components/UI/HeaderButton'; 
    import {useDispatch, useSelector} from "react-redux";
    import {DataTable, TextInput} from 'react-native-paper';
    import AsyncStorage from '@react-native-community/async-storage';
    import * as authActions from "../../store/actions/auth";


     const ManageDevice = props =>{
    const dispatch = useDispatch();
    const devices = useSelector(state => state?.auth?.availableDevice);
    useEffect(() => {
        const onScreenLoad = async () => {
            const useridfordevices = await
                AsyncStorage.getItem("userDatauserid");
            const obj = JSON.parse(useridfordevices);
            const {userid} = obj;
            var userid1 = userid[0];
            await dispatch(authActions.getDeviceInfo(userid1))
        };
        onScreenLoad();
     }, [dispatch]);

     if (devices)
     {
     return (
        <ScrollView showsVerticalScrollIndicator={true}>
        <View>
          <DataTable>
                <DataTable.Header>
                    <DataTable.Title>
                        <Text>Target Id</Text>
                    </DataTable.Title>
                    <DataTable.Title>
                        <Text>Target Name</Text>
                    </DataTable.Title>
                </DataTable.Header>
                {devices?.map((item, key) => (
                        <DataTable.Row>
                            <DataTable.Cell>{item.TargetId}</DataTable.Cell>
                            <DataTable.Cell><TextInput
                            editable={true}
                            value={item.TargetName}
                            
                            theme={{ colors: {  placeholder: "#f5f5f5", 
                                background: "transparent", 
                             text: 'green', primary: '#D43790' } }}>
                                </TextInput>
                                </DataTable.Cell>

                           </DataTable.Row>
                    )
                )}
            </DataTable>

            <View style={styles.textview}>
           <Text style={styles.textstyle}>Click on the Target Name to edit</Text>
           </View>
        </View>
       </ScrollView>
       )
       }
      else if(!devices){
      return(
         <View><Text>No Devices to display</Text></View>
      )
      }
      }

      ManageDevice.navigationOptions = navData =>{
    return{
      headerTitle: 'Manage Devices',
      headerTitleStyle:{
         color:'white',
         
      },
      headerTitleAlign:"left",
      headerStyle: {
        backgroundColor: '#0437F2',
        
      },
      headerLeft: () =>
        <HeaderButtons HeaderButtonComponent={HeaderButton}>
          <Item
            iconName={'chevron-back-outline'}
            onPress={() => {
             navData.navigation.navigate('Home');
            }}
          />
        </HeaderButtons>
       }
       };

     const styles = StyleSheet.create({
     textview:{
    top:'5%'
    },
    textstyle:{
     fontWeight:'bold',
     color:'orange'
    }
    })

    export default ManageDevice;

誰能告訴我哪里出錯了？當“設備”為空時，我想要“無設備顯示”訊息。提前致謝

uj5u.com熱心網友回復：

像這樣做：

if(devices && devices?.length > 0){
     return(
          //Do Something
     )
}
else{
     return(
          <View>
               <Text>No Devices to display</Text>
          </View>
     )
}

希望這對你有用。

標籤：反应原生 if 语句 世博会

上一篇：在if陳述句中宣告變數

下一篇：在Sort(arr,arr n)線上，arr n如何在這里指定結束位置？