React Native：在视图中返回条件语句

Question

我面临一个奇怪的问题。 在我的本机反应应用程序中，我有条件呈现View和ScrollView 。 问题是 false 语句首先显示在 true 语句之前，所以我在下面的示例中假设PinCodeVisible.showPinLock is true ，因此Pincode应该显示而不是文本的 false 语句。 我的问题是它首先显示虚假陈述，即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

您可以检查以下内容，

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

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

2. 如果你想更新 object 那么你可以使用扩展运算符进行更新。

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

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

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>
   );