I'm new to react native, so I apologize for errors in the code. First: I use Android Studio, VS Code, react native(expo) and sqlite(expo), supporting only android (I haven't programmed for ios yet).
I have a serious problem in my code and I have no idea how to start. The 'useEffect', to work, you have to save the file 2 times (ctrl s in vs code). Don't just open the app.
THIS IS MY LOGIN PAGE login.js
import React, {useState,useEffect} from 'react';
import {View,Text,Pressable,Image,FlatList,ImageBackground,Alert} from 'react-native';
import {TextInput} from 'react-native-gesture-handler';
import fundoLogin from './styleLogin';
import Tb_user from '../../src/models/tb_user';
import Tb_veic_user from '../../src/models/tb_veic_user';
import db from "../../src/services/SQLiteDatabse";
import NetInfo from '@react-native-community/netinfo';
const printUser = (user) => {
console.log(`ID_user:${user.ID_user}, username:${user.username}, senha:${user.senha}, ID_empresa:${user.ID_empresa}, nome_empresa:${user.nome_empresa}, status_user:${user.status_user}`)
}
const printV = (v) => {
console.log(`ID_veic_uso:${v.ID_veic_uso}, username:${v.username}, placa:${v.placa}, atividade:${v.atividade}, data_inic:${v.data_inic}, km_inic:${v.km_inic}, data_final:${v.data_final}, km_final:${v.km_final}, obs:${v.obs}, integrado:${v.integrado}`)
}
function Login({ navigation, route }) {
const [username, setUsername] = useState("")
const [password, setPassword] = useState("")
const [errorLogin, setErrorLogin] = useState("")
const [users, setUsers] = useState([])
const [net, setNet] = useState("")
const [dadosVeic, setDadosVeic] = useState([])
const [info, setInfo] = useState([])
const findTbVeic = (id) => {
return new Promise((resolve, reject) => {
db.transaction((tx) => {
tx.executeSql(
"SELECT * FROM tb_veic_user WHERE integrado=0 AND km_final IS NOT NULL ;",
[],
//-----------------------
(_, { rows }) => {
if (rows.length > 0) {
resolve(rows._array)
}
else {
reject("Obj not found: id=" id);
} // nenhum registro encontrado
},
(_, error) => reject(error) // erro interno em tx.executeSql
);
});
});
};
useEffect(() => {
NetInfo.fetch().then(state => {
setNet(state.isConnected)
});
if (net === true) {
findTbVeic()
.then(a => setDadosVeic(a))
.then( dadosVeic.map(item => {
// ENVIA DADOS PARA A API
fetch('url API', {
method: 'POST',
body: JSON.stringify({
username: item.username,
placa: item.placa,
atividade: item.atividade,
data_inic: item.data_inic,
km_inic: item.km_inic,
data_final: item.data_final,
km_final: item.km_final
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
//ALTERA O 'INTEGRADO' == 1
Tb_veic_user.updateV( item.ID_veic_uso )
}))
}else{
console.log('sem conexao com a internet')
}
},[])
const importTbUser = () => {
// DADOS DA API SALVA EM CONST USERS
fetch('url API')
.then( res => res.json())
.then(
(dado) => {
setUsers(dado.data)
}
)
// INSERE, NO BANCO DE DADOS, OS DADOS DA API
const a = users.map((element) => {
Tb_user.create({ID_user:element.ID_user, username:element.username, senha:element.senha, ID_empresa:element.ID_empresa, nome_empresa:element.nome_empresa, status_user:element.status_user})
});
}
const login = () => {
// FAZER LOGIN
return new Promise((resolve, reject) => {
db.transaction(tx => {
tx.executeSql(
'SELECT ID_user, username, senha FROM tb_user WHERE username = ? and senha = ? LIMIT 1;',
[username, password],
//-----------------------
(_, { rows }) => {
if (rows.length > 0){
resolve(rows._array),
navigation.navigate('Veic', {
paramKey: username,
})
}else{
reject("Obj not found");
} // nenhum registro encontrado
},
(_, error) => reject(error) // Success
);
});
});
}
return (
<View style={fundoLogin.container}>
<ImageBackground
source={require('../../imagens/1.jpg')}
style={fundoLogin.imageFundo}
>
<Image
style={fundoLogin.imageLogo}
source={require('../../imagens/logo_cymi.png')}
/>
{net === true ?
<Image
style={{height:30,width:30}}
source={require('../../imagens/signal.png')}
/>
:
<Image
style={{height:30,width:30}}
source={require('../../imagens/no-signal.png')}
/>
}
<TextInput
style={fundoLogin.input}
placeholder='Digite seu email'
onChangeText={txtUsername => setUsername(txtUsername)}
value={username}
/>
<TextInput
style={fundoLogin.input}
placeholder='Digite sua senha'
secureTextEntry={true}
onChangeText={txtPassword => setPassword(txtPassword)}
value={password}
/>
{errorLogin === true
?
<View>
<Text style={fundoLogin.error}>email ou senha inválido</Text>
</View>
:
<View>
</View>
}
{(username === "" || password === "")
?
<Pressable
disabled={true}
style={fundoLogin.button}
>
<Text style={fundoLogin.textButton}>Login</Text>
</Pressable>
:
<Pressable
style={fundoLogin.button}
onPress={login}
>
<Text style={fundoLogin.textButton}>Login</Text>
</Pressable>
}
<Pressable
style={fundoLogin.button}
onPress={importTbUser}
>
<Text style={fundoLogin.textButton}>Importar</Text>
</Pressable>
<Pressable
style={fundoLogin.info}
onPress={navigation.navigate('Info')}
>
<Text style={fundoLogin.textInfo}>?</Text>
</Pressable>
</ImageBackground>
</View>
);
}
export default Login;
- the app, when opened, will search (if it has internet) in the database for vehicles that have a final kilometer (which have already been selected and released), and will add this information inside the api, updating the database (changing the ' integrated to 1', that is, informing that aql "file" has already been to api)
My app works like this: it starts on the login page (where there is a login button, import button and a company information button) and goes to another page to select a vehicle (this 'veic' page also has the same problem in useEffect). All components are working perfectly fine, I've checked all possible console.logs, and it's running fine. The only problem is that use effect doesn't work (on this page it has to be run 2x to refresh, on the 'veic' page it only does one thing, and the others don't). If anyone can tell me more, please. I don't even know if it's an error in my code or in Android Studio. Thank you in advance!!!
CodePudding user response：
The problem is that you are not awaiting NetInfo.fetch().
Write the code under NetInfo.fetch() in NetInfo.fetch().then(... your remaining useEffect code...).
Like this:
useEffect(() => {
NetInfo.fetch().then((state) => {
if (state.isConnected) {
findTbVeic()
.then(a => setDadosVeic(a))
.then( dadosVeic.map(item => {
// ENVIA DADOS PARA A API
fetch('url API', {
method: 'POST',
body: JSON.stringify({
username: item.username,
placa: item.placa,
atividade: item.atividade,
data_inic: item.data_inic,
km_inic: item.km_inic,
data_final: item.data_final,
km_final: item.km_final
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
//ALTERA O 'INTEGRADO' == 1
Tb_veic_user.updateV( item.ID_veic_uso )
}))
}else{
console.log('sem conexao com a internet')
}
});
}, []);
CodePudding user response：
Eu entendi o que Maximilan disse, e nessa pagina de login deu super certo. Mas na pagina de 'veic' nao estou com tanta sorte
useEffect(() => {
findByUserna( route.params.paramKey )
.then(
findByV(route.params.paramKey)
.then(
d => setDados(d)
),
console.log('use effect 1 ------>',dados)
)
.then(
dados.map(
item => setIDVeic(item.ID_veic_uso)
),
console.log('use effect 2 ------>',IDVeic)
)
},[])
Ao abrir a tela, os consoles estao vazios, nao salva a variavel, mas ao atualizar, dá certo, as variaveis sao salvas e mostradas no console normalmente:
//na primeira vez, o console:
use effect 1 ------> Array []
use effect 2 ------> null
ENCONTRADO de tb_user o ID_user, username, nome_empresa ---> SORAIA
ENCONTRADO de tb_veic_user o ID_veic_uso onde kmf=null
//na segunda vez
use effect 1 ------> Array [
Object {
"ID_veic_uso": 4,
},
Object {
"ID_veic_uso": 7,
},
]
use effect 2 ------> 7