Условная логика реагирует на собственные текстовые строки, которые должны отображаться в компоненте ‹Text›.

Привет, я делаю приложение в React Native, и у меня проблема.

    let currentUserUID = firebase.auth().currentUser.uid;
    const [partnership, setPartnership] = useState('');
  
    useEffect(() => {
      async function getUserInfo(){
        let doc = await firebase
        .firestore()
        .collection('users')
        .doc(currentUserUID)
        .get();
          let dataObj = doc.data();
          setPartnership(dataObj.partnership)
      }
      getUserInfo();
    })

    console.log(partnership)

    return(
        <View style={{flex: 1}}>
            {partnership === "Partner" || "1KPartner" || "BusinessPartner" &&
                <Text>You have permission</Text>
            }
            <LessonHeader navigation={navigation}/>
            <StyledBoxV3 style={{flex: 1}}>
                <LessonMenu item={item} navigation={navigation} />
            </StyledBoxV3>
        </View>
    )
};

const StyledBoxV3 = styled(StyledBox)`
    padding: 0;
    border-top-left-radius:0;
    border-top-right-radius:0 ;
`

поэтому, когда кто-то является партнером, 1KPartner или BusinessPartner, я хочу показать или скрыть определенные данные, но получаю сообщение об ошибке

Ошибка: текстовые строки должны отображаться внутри компонента.

Проблема в условной логике, если я ее удалю, у меня не будет никаких проблем. Как я могу заставить это работать? Я уже пытался поместить переменную в свой возврат и обновить ее с помощью функции в моем useEffect, но у меня это не работает.


person Sander van Maastricht    schedule 10.06.2021    source источник
comment
Где ваш импорт? Вы должны импортировать { Text } из 'react-native'   -  person Joel Hager    schedule 10.06.2021


Ответы (2)


Ваша логика, где вы сравниваете стоимость партнерства, написана неправильно. Я бы предложил быть классным и писать

{(partnership === "Partner" || 
  partnership === "1KPartner" || 
  partnership === "BusinessPartner") && 
  <Text>You have permission</Text>}   
person arnelisk    schedule 10.06.2021
comment
Спасибо! Это сработало - person Sander van Maastricht; 10.06.2021

Попробуйте обновить условие, как это,

Вспомогательная функция для определения компонента для рендеринга на основе состояния partnership.

  const renderPermissionText = (value: String) => {
    switch (value) {
      case 'Partner':
      case '1KPartner':
      case 'BusinessPartner':
        return <Text>You have permission</Text>;
      default:
        return null;
    }
  };

Обновите макет до

...
<View style={{flex: 1}}>
  {renderPermissionText(partnership)}
  ...
</View>
person imKrishh    schedule 10.06.2021