#reactjs #react-native #use-effect
#reactjs #реагировать -родной #использование-эффект
Вопрос:
Я хотел войти в систему не из функции, а из изменения инструкции useState, если статус входа и выборки true, тогда пользователь может получить API. Проблема, которую я заметил, была
- Эти изменения не были мгновенными
- Даже если это не мгновенно (через журнал консоли все равно было 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>
}
}
Комментарии:
1. Вы забыли вернуться в другое место?
2. проблема не в представлении, я просто сократил свой код, потому что он слишком длинный, проблема в useState , setLoginStatus , setFetchStatus , который не изменяет оператор с FALSE на TRUE (через журнал консоли), но он отображает <View> , который требует, чтобы оператор был TRUE
Ответ №1:
я думаю, было бы проще сделать это так :
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>
);
}
Комментарии:
1. привет, спасибо, я использую setTimeout прямо сейчас, его 6000 мс, на случай, если мне не удалось получить API
2. я думаю, что вам следует использовать .catch и для формы сброса, я использовал setTimeout для имитации api выборки. пример:
fetch('https://example.com/user', { method: 'POST', body: ..., }) .then(response => response.json()) .then(result => { console.log('Success:', result); }).catch(error => { console.error('Error:', error); setLoginStatus(false); setFetchStatus(false); })
Ответ №2:
Я использую тот же код, извините, что это ошибка idk, если она из expo или react. Повторный рендеринг useEffect по назначению