Блог

Я хотел войти в систему не из функции, а из изменения инструкции useState, если статус входа и выборки true, тогда пользователь может получить API. Проблема, которую я заметил, была

1. Эти изменения не были мгновенными
2. Даже если это не мгновенно (через журнал консоли все равно было false), но возврат, если login == true, все равно отображается.

Вопрос в том, какова наилучшая практика в этой ситуации? Возможно ли не создавать новую функцию / использовать только useEffect?

Проблема заключается в useState, setLoginStatus , setFetchStatus , которые не меняют оператор с FALSE на TRUE (через журнал консоли), но он отображает, что требует, чтобы оператор был TRUE. Если он изменит это утверждение на true, оно запустит useEffect, верно?

       export default function TabOneScreen ({navigation}) {
        const [loginStatus,setLoginStatus] = useState(false)
        const [fetchStatus,setFetchStatus] = useState(false)


       function Login(){
        ////// this is the login button
        console.log('stating login dan fetch')  
        setLoginStatus(true)
        setFetchStatus(true)
        LoginSucess()
      }
    
      useEffect(()=>{
        console.log(fetchStatus,loginStatus)
        if (loginStatus == true amp;amp; fetchStatus == true){
          console.log(login sucess , fetching API)
          gettingAPI()
        }
      },[fetchStatus])

    if(loginStatus==true) {
    return(
      <View style={styles.loadingContainer}>
        <View style={styles.etcContainer}>
        {loadingView == false ? 
          <View><Text style={{color:'#008080'}}>Fetching...{loginStatus}</Text></View> : 
          <View><Text style={{color:'#008080'}}>If fetching persist more than 10s, contact operator</Text></View>}
        </View>
        <LoadingScreen/>
        <View style={styles.etcContainer}>
        {loadingView == false ? 
          <View></View> : 
          <View></View>}
        </View>
      </View>
    )
    } else{
    <View style={styles.loginButton1}>
        <TouchableOpacity 
            onPress={()=>Login()}
            color="#aaa"
            style = {styles.buttonLogin}
        >
        <View style={styles.loginButton2}>
        <Text  style={[{color:'white' , fontWeight: 'bold'},gS.fontSize24]}> Login </Text>
        </View>
        </TouchableOpacity>
      </View>
      }
    }
 

я думаю, было бы проще сделать это так :

 export default function TabOneScreen() {
  const [loginStatus, setLoginStatus] = useState(false);
  const [fetchStatus, setFetchStatus] = useState(false);

  function Login() {
    setLoginStatus(true);
    setFetchStatus(true);
  }

  useEffect(() => {
    console.log(fetchStatus, loginStatus);
    if (loginStatus amp;amp; fetchStatus) {
      setTimeout(()=>{
         alert("login sucess ,fetching API"); 
          setLoginStatus(false);
          setFetchStatus(false);
      }, 1000);
    }
  }, [fetchStatus, loginStatus]);
  
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
        {loginStatus?
        <View>
          <Text style={{color:'#008080'}}>Fetching...{loginStatus}</Text>
        </View> :
          <Button
            onPress={()=>Login()}
            title="Press Me"
          />}
        </View>
      </View>
    );
  }
 

Выставка

Я использую тот же код, извините, что это ошибка idk, если она из expo или react. Повторный рендеринг useEffect по назначению