UseEffect 改变不是立竿见影的吗？但它仍然以某种方式呈现

Question

我想登录不是从函数而是从useState语句更改，如果登录和获取状态为真，那么用户可以获得API。我注意到的问题是

1. 这些变化不是即时的
2. 即使它不是即时的（通过控制台日志它仍然是错误的），但如果 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 && 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>
      }
    }

Answer 1

我正在使用相同的代码，抱歉，如果它来自 expo 或反应，它是一个错误 idk。 useEffect 按预期重新渲染

Answer 2

我认为你这样做会更容易：

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

Expo