reactjs - 使用 console.log 时 React Hook 不返回任何内容

Question

我正在使用 redux 挂钩来存储一些数据以与互联网上的一些 json 文件进行比较，但不知何故，当我记录这些值时它没有显示，如下所示

我在这里使用这些值

错误

它显示来自 json 的数据而不是来自钩子的数据，发生了什么？我想怎么做才能显示钩子数据并正确比较它们，非常感谢

这是代码 https://snack.expo.io/@quockhanh210199/upbeat-ramen （奇怪的问题发生所以它不能运行，但这里是代码）

function LoginScreen({navigation}) {
    // set timeout ID for setTimeOut()
    const timeIdRef = React.useRef(null);
    const dispatch = useDispatch();
    const [username, getUsername] = useState('');
    const [password, getPassword] = useState('')

    // handleInput = (e) => {
    //  getUserInfo(e.target.value);
    // };

    // mock user from fake api
    useEffect(() => {
        dispatch(getUser());
    
    }, [dispatch]);

    //dispatch(GetUserInfo(username, password));

    //  const handlegetdata= ({user,password})=>{
    // dispatch(GetUserInfo(user,password))
    // // }

    // console.log(handleGetdata.user)


    const user = useSelector((state) => {
        return state.User.user;
    });
    function getAuth(){
           console.log('User from local '+ username)
             console.log('User from Json '+user.username)
    }
    useEffect(() => {
        return () => {
            if (timeIdRef.current) {
                // make sure this is always cleared in case clearTo is never called
                clearTimeout(timeIdRef.current);
            }
        };
    }, [timeIdRef]);
    // console.log();

    const Login = useSelector((state) => {
        return state.LoginAction.loginStatus;
    });
    // console.log(Login)
    //   const initModal = false;
    // eslint-disable-next-line require-jsdoc
    function handleLogin() {
        dispatch({type: 'changeLogin'});
    }
    function handlDefault() {
        dispatch({type: 'getDefault'});
    }

    // not show??
    // console.log(username);
    // console.log('Login ' + Login)
    //   const [show, doShow] = useState(initModal);

    // const [visible, UpdateView] = useState(false)

    // Show modal dialog
    //   function ChangeModalValue() {
    //     console.log(show);
    //     doShow(!show);
    //   }
    // setTimer after Model Appear

    function SetTimer() {
        handleLogin();
        if (timeIdRef.current) {
            // clear any previous timeIdRef to avoid multiple button click activate multiple setTimeout
            clearTimeout(timeIdRef.current);
        }
        const timeID = setTimeout(() => {
            navigation.navigate('Home');
        }, 3000);
        timeIdRef.current = timeID;
    }

    function clearTO() {
        clearTimeout(timeIdRef.current);
        timeIdRef.current = null;
        handlDefault();
    }

    // make text black when check complete
    function getTextStyle(isValid) {
        if (isValid) {
            return {
                color: 'black',
            };
        }

        return {
            color: 'grey',
        };
    }
    //   function getLoginText() {
    //     return <CirclesLoader />;
    //   }
    // function hideText(visible){
    //     if(isDisabler)

    // }
    const loginValidationSchema = Yup.object().shape({
        email: Yup.string().email('Please enter valid email').required('Email Address is Required'),
        password: Yup.string()
            .min(8, ({min}) => `Password must be at least ${min} characters`)
            .required('Password is required'),
    });
    return (
        <View style={styles.ViewStyle}>
            <Text style={{fontSize: 40}}>Login To System</Text>

            <Formik
                validateOnMount
                validationSchema={loginValidationSchema}
                initialValues={{email: '', password: ''}}
                onSubmit={value => {
                    getUsername(value.email)
                    getPassword(value.password)
                    getAuth()  ///console log but return nothing
                    SetTimer()
                }}
            // () => navigation.navigate('Login')
            >
                {({handleChange, handleBlur, handleSubmit, values, errors, touched, isValid}) => (
                    <View>
                        <TextInput
                            name="email"
                            placeholder="Email Address"
                            style={styles.TextInputForm}
                            onChangeText={handleChange('email')}
                            onBlur={handleBlur('email')}
                            value={values.email}
                            keyboardType="email-address"
                        />
                        {errors.email && touched.email && <Text style={styles.errorText}>{errors.email}</Text>}
                        <TextInput
                            name="password"
                            placeholder="Password"
                            onChangeText={handleChange('password')}
                            onBlur={handleBlur('password')}
                            value={values.password}
                            secureTextEntry
                            style={styles.TextInputForm}
                        />
                        {errors.password && touched.password && (
                            <Text style={styles.errorText}>{errors.password}</Text>
                        )}

                        <TouchableOpacity
                            onPress={handleSubmit}
                            style={styles.ButtonLogin}
                            disabled={!isValid || values.email === ''}>
                            {/* <CirclesLoader size={20} dotRadius={7} /> */}
                            <Text style={getTextStyle(isValid)}>Login</Text>
                        </TouchableOpacity>
                        <View>
                            <Modal transparent visible={Login}>
                                <View
                                    style={{
                                        backgroundColor: '#000000',
                                        flex: 1,
                                        justifyContent: 'center',
                                        alignContent: 'center',
                                    }}>
                                    <View style={styles.ModalStyle}>
                                        <CirclesLoader />
                                        <TextLoader
                                            textStyle={{
                                                fontSize: 25,
                                                marginTop: 20,
                                            }}
                                            text="Logging you in"
                                        />
                                        <TouchableOpacity onPress={clearTO} style={styles.ButtonBack}>
                                            <Text>Go back</Text>
                                        </TouchableOpacity>
                                    </View>
                                </View>
                            </Modal>
                        </View>
                    </View>
                )}
            </Formik>
        </View>
    );
}

请帮忙，非常感谢

标签： reactjsreact-nativereact-hooks