reactjs - 在状态转换错误期间无法更新 - 导航到另一个屏幕时使用钩子做出本机反应

Question

您好，我一直在尝试以所有可能的方式解决此问题，但仍然找不到问题，仅当应用程序在发现用户已经第一次看到屏幕后导航到其他屏幕时才会出现问题，我在想是因为当我离开时，状态仍然没有更新？任何帮助表示赞赏。

function UserScreen({navigation}) {




    useEffect(() => {        
        checkIfFisrtTime()    
}, [])


    const [name, setname] = useState(undefined)
    const [altura, setaltura] = useState(undefined)
    const [peso, setpeso] = useState(undefined)
    const [hombre, sethombre] = useState(false)
    const [mujer, setmujer] = useState(false)
    const [error, seterror] = useState(undefined)



    const [loading, setloading] = useState(true)
    const [first, setfirst] = useState()


    async function checkIfFisrtTime() {


            const value = await AsyncStorage.getItem("firstLogging")
             setfirst(value)
            setloading(false)


    }


    function check() {
        console.log(first)
        console.log(loading)
    }


if (loading==true && first ==undefined || first==null && loading===true || first=="false" && loading===true || first===undefined && loading ===false)  {


    return (<ActivityIndicator></ActivityIndicator>)

}


if(first==="false" && loading === false ){   


    return navigation.navigate("Mainflow")

}

if (  first==null && loading===false ) {



    return (



        <View style={{ top: height * 0.1, flexDirection: "column", justifyContent: "space-between", height: height * 0.6 }}>



            <Text style={{ textAlign: "center", fontWeight: "bold" }}>{i18n.t("Information")}</Text>
            <CheckBox

                left
                title={i18n.t("Male")}
                checkedIcon='dot-circle-o'
                uncheckedIcon='circle-o'

                checked={hombre}
                onPress={() => { sethombre(true), setmujer(false) }}
                containerStyle={{ width: width * 0.5, alignSelf: "center", borderRadius: 15 }}
                icon
            />

            <CheckBox
                left
                title={i18n.t("Female")}
                checkedIcon='dot-circle-o'
                uncheckedIcon='circle-o'
                checked={mujer}
                onPress={() => { setmujer(true), sethombre(false) }}
                containerStyle={{ width: width * 0.5, alignSelf: "center", borderRadius: 15 }}
            />




            <Input
                placeholder={i18n.t("Age")}
                errorStyle={{ color: 'red' }}
                errorMessage={undefined}
                onChangeText={(name) => { setname(name.replace(/[- #*;,.<>\{\}\[\]\\\/]/gi, '')) }}
                value={name}
                keyboardType="numeric"
                maxLength={2}
                containerStyle={{ width: width * 0.5, alignSelf: "center" }}
                leftIcon={
                    <MaterialCommunityIcons name="vanish" size={24}></MaterialCommunityIcons>
                }
            />

            <Input
                placeholder={i18n.t("Height")}
                errorStyle={{ color: 'red' }}
                errorMessage={undefined}
                onChangeText={(altura) => { setaltura(altura.replace(/[- #*;,.<>\{\}\[\]\\\/]/gi, '')) }}
                value={altura}
                keyboardType="numeric"
                maxLength={3}
                containerStyle={{ width: width * 0.5, alignSelf: "center" }}
                leftIcon={
                    <MaterialCommunityIcons name="arrow-split-horizontal" size={24}></MaterialCommunityIcons>
                }
            />
            <Input
                placeholder={i18n.t("Weight")}
                errorStyle={{ color: 'red' }}

                onChangeText={(namee) => { setpeso(namee.replace(/[- #*;,.<>\{\}\[\]\\\/]/gi, '')) }}
                value={peso}
                keyboardType="numeric"
                maxLength={3}
                containerStyle={{ width: width * 0.5, alignSelf: "center" }}
                leftIcon={
                    <MaterialCommunityIcons name="scale-bathroom" size={24}></MaterialCommunityIcons>
                }
                errorMessage={error}
            />


            <Button title={i18n.t("Continue")} containerStyle={{ width: width * 0.4, alignSelf: "center" }} raised onPress={()=>{ValidateIfundefined()}}>

            </Button>

            <Button title="boton" onPress={()=>{check()}}></Button>



        </View>


    )

    async function ValidateIfundefined() {   

        if (name==undefined && altura==undefined && peso==undefined && hombre==false && mujer==false) {


            //seterror("Please make sure everything is ok")
        }

        if (altura==undefined || peso==undefined || altura==undefined || hombre==false && mujer == false) {


            //seterror("Please fill everything")
        }

        if (name!=undefined && altura!=undefined && peso!=undefined && mujer!=false && hombre==false) {

            await AsyncStorage.setItem("firstLogging","false")
            navigation.navigate("Mainflow")

        }

        if (name!=undefined && altura!=undefined && peso!=undefined && hombre!=false && mujer==false) {
            await AsyncStorage.setItem("firstLogging","false")       
            navigation.navigate("Mainflow")
        }

    }


}

}

标签： reactjsreact-nativereact-navigation

Answer 1

试试这个（示例代码），可能的堆栈导航器问题

componentDidMount() {
     const { navigation } = this.props;
     navigation.addListener('willFocus', () => {
         // this.getListData(); fetch data here
     });
     // this.setState({ listData: data });
}