React Native : Return 视图中的条件语句

Question

我遇到了一个奇怪的问题。在我的本机反应应用程序中，我有条件呈现 View 和 ScrollView。问题是错误陈述首先显示在真实陈述之前，所以我在下面的例子中假设 PinCodeVisible.showPinLock is true 所以 Pincode 应该显示而不是文本的错误陈述。我的问题是它首先显示 text 的错误陈述，然后在加载 pincode 的真实陈述之后，我只想忽略错误陈述下的 text 因为它是假的，

为什么即使是虚假陈述也显示出来？我错过了什么吗？

const [PinCodeVisible, setPin] = useState({ PINCodeStatus: "choose", showPinLock: false });

React.useEffect(() => {
setPin({ showPinLock: true});   //let say the pincode is true
 }, [])


return (
    <View style={styles.container} >
        {PinCodeVisible.showPinLock === true ? (

            <PINCode
                // modalVisible={modalVisible}
                status={PinCodeVisible.PINCodeStatus}
                touchIDDisabled={true}
                finishProcess={() => _finishProcess()}
                timeLocked={5000}
            />
        ) :
            <ScrollView style={styles.container}> //this scrollview shown first event the statement is true
                <Text>This text will show before the true statement above</Text>  // it should not shown because the statement is true
            </ScrollView>}
    </View>
)

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }

Answer 1

您可以检查以下内容，

这里如果你想在页面加载时显示一个true语句那么必须将true设置为你的状态的初始值只是不需要在useEffect中设置。

const [pinCodeVisible, setPin] = useState({ PINCodeStatus: "choose", showPinLock: true });

如果要更新对象，则可以使用展开运算符进行更新。

setPin({ ... pinCodeVisible, showPinLock: true});

在渲染方法中，您可以使用如下条件运算符

return (
    <View style={styles.container}>
      {(pinCodeVisible.showPinLock && (
        <PINCode
          finishProcess={() => _finishProcess()}
          status={pinCodeVisible.PINCodeStatus}
          timeLocked={5000}
          touchIDDisabled={true}
        />
      )) || (
        <ScrollView style={styles.container}>
          <Text>This text will show before the true statement above</Text>
        </ScrollView>
      )}
    </View>
   );

React Native : Return 视图中的条件语句

React Native : Return conditional Statement in View

javascript

mobile-application

reactjs

react-native