React Native：useState setter 不會重新渲染

Question

我是新來的反應和 javascript。 我試圖在登錄用戶時顯示 ActivityIndicator，但是，setIsLoading 方法實際上並沒有更改 state 並調用重新渲染。 handleLogin 方法在單擊按鈕時被調用，當我單擊按鈕時，useEffect 不會打印到控制台，這意味着它沒有被調用。 此外，console.log(isLoading) 仍將值顯示為 false，它被初始化為。 奇怪的是，當我注釋掉整個 firebase 部分時，我能夠讓它工作，我想知道是否有人可以幫助我理解為什么會這樣？ 謝謝你。

import React, { useState, useEffect } from 'react'
import firebase from '../firebase'
import { ActivityIndicator, StyleSheet, Text, TextInput, View, Button} from 'react-native'
export default function LoginScreen({navigation}) {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [errorMessage, setErrorMessage] = useState(null)
    const [isLoading, setIsLoading] = useState(false)
    const [showLoader, setShowLoader] = useState(false)

    useEffect(() => {
        setShowLoader(isLoading)
        console.log('useEffect')
    },[isLoading])

    const handleLogin = () => { 
        setIsLoading(true)
        console.log(isLoading)

        firebase.auth().signInWithEmailAndPassword(email, password)
        .then(() => { navigation.navigate('Home')})
        .then(setIsLoading(false))
        .catch((error) => {setErrorMessage(error.message)})

        console.log('handleLogin')
    }
    return (
      <View style={styles.container}>
        <Text>Login</Text>
        {errorMessage &&
          <Text style={{ color: 'red' }}>
            {errorMessage}
          </Text>}
        <TextInput
          style={styles.textInput}
          autoCapitalize="none"
          placeholder="Email"
          onChangeText={email => setEmail(email)}
          value={email}
        />
        <TextInput
          secureTextEntry
          style={styles.textInput}
          autoCapitalize="none"
          placeholder="Password"
          onChangeText={password => setPassword(password)}
          value={password}
        />
        <Button title="Login" onPress={handleLogin} />
        <Button
          title="Don't have an account? Sign Up"
          onPress={() => navigation.navigate('SignUp')}
        />
        {
            showLoader && <ActivityIndicator/>
        }   
      </View>
    )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  textInput: {
    height: 40,
    width: '90%',
    borderColor: 'gray',
    borderWidth: 1,
    marginTop: 8
  }
})

編輯：謝謝，我發現直到方法 handleLogin 完成后才會調用 useEffect，所以 isLoading 設置為 true，但在登錄過程之后再次設置為 false，所以到時候調用 useEffect ，它看到 isLoading state 沒有改變，所以 useEffect 沒有被調用。 如果有人對如何繞過這個流程有任何想法（所以在登錄過程之前調用 useEffect 或其他東西），我將不勝感激。 謝謝！

Answer 1

在執行 setIsLoading 之前，您似乎正在導航出屏幕，盡管我不知道如果沒有代碼的 rest 是否會出現問題。

console.log(isLoading) 是 false 因為 useState 是異步的，setIsLoading 是一個 promise 在到達下一行代碼時尚未解決。

這行代碼isLoading? setShowLoader(true): setShowLoader(false) isLoading? setShowLoader(true): setShowLoader(false)會像setShowLoader(isLoading)一樣干凈