条件逻辑反应原生“文本字符串必须在 <Text> 组件中呈现。”答案

【问题标题】：Conditional Logic react native "Text strings must be rendered within a <Text> component."条件逻辑反应原生“文本字符串必须在 <Text> 组件中呈现。”
【发布时间】：2021-06-10 05:18:38
【问题描述】：

您好，我正在制作一个反应原生的应用程序，但我遇到了问题

    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 时，我想显示或隐藏特定数据，但我得到了错误

“错误：文本字符串必须在组件内呈现。”

问题在于条件逻辑，如果我删除它，我没有任何问题。我怎样才能使这项工作？我已经尝试在我的 return 中放入一个变量，并使用我的 useEffect 中的一个函数对其进行更新，但它对我不起作用。

【问题讨论】：

您的进口产品在哪里？您应该从 'react-native' 导入 { Text }

标签： reactjs firebase react-native

【解决方案1】：

您比较合作伙伴关系价值的逻辑写错了。我会建议优雅和写作

{(partnership === "Partner" || 
  partnership === "1KPartner" || 
  partnership === "BusinessPartner") && 
  <Text>You have permission</Text>}

【讨论】：

【解决方案2】：

尝试像这样更新条件，

一个帮助函数，用于根据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>

【讨论】：