useState 不起作用-React Native 和 SQLite
2022-03-28
258
我是 React Native 的新手,对代码中的错误深表歉意。我使用 React Native 和 SQLite(全部使用 expo)。
我的问题是“useState”在进入应用程序时不会保存数据,我必须手动更新应用程序(在 Visual Studio Code 中按 Ctrl + s)才能保存数据。我不知道为什么会发生这种情况,谁能告诉我问题出在哪里?
- 控制台最初显示“数组 []”,更新后数据出现在数组内
编辑我的代码 :)
控制台(第一个) ->
use effect 0 ------> Array []
use effect 1 ------> null
ENCONTRADO de tb_user o ID_user, username, nome_empresa ---> SORAIA
ENCONTRADO de tb_veic_user o ID_veic_uso onde kmf=null
控制台(第二个) ->
use effect 0 ------> Array [
Object {
"ID_veic_uso": 1,
},
]
use effect 1 ------> null
ENCONTRADO de tb_user o ID_user, username, nome_empresa ---> SORAIA
ENCONTRADO de tb_veic_user o ID_veic_uso onde kmf=null
控制台(第三个) ->
use effect 0 ------> Array [
Object {
"ID_veic_uso": 1,
},
]
use effect 1 ------> 1
ENCONTRADO de tb_user o ID_user, username, nome_empresa ---> SORAIA
ENCONTRADO de tb_veic_user o ID_veic_uso onde kmf=null
const [dados, setDados] = useState([]);
const [IDVeic, setIDVeic] = useState(null);
const findByUserna = (userna) => {
return new Promise((resolve, reject) => {
db.transaction((tx) => {
//comando SQL modificável
tx.executeSql(
"SELECT ID_user, username, nome_empresa FROM tb_user WHERE username = ?;",
[route.params.paramKey],
//-----------------------
(_, { rows }) => {
if (rows.length > 0) {
resolve(rows._array),
console.log('ENCONTRADO de tb_user o ID_user, username, nome_empresa ---> ',route.params.paramKey);
}else {
reject("Obj not found: id=" + userna),
console.log('NAO ENCONTRADO de tb_user o ID_user, username, nome_empresa');
} // nenhum registro encontrado
},
(_, error) => reject(error) // erro interno em tx.executeSql
);
});
});
};
const findByV = (cont) => {
return new Promise((resolve, reject) => {
db.transaction((tx) => {
tx.executeSql(
"SELECT ID_veic_uso FROM tb_veic_user WHERE username LIKE ? AND km_final IS NULL",
[route.params.paramKey],
//-----------------------
(_, { rows }) => {
if (rows.length > 0) {
resolve(rows._array),
console.log('ENCONTRADO de tb_veic_user o ID_veic_uso onde kmf=null');
}else {
reject("Obj not found: v=" + cont),
console.log('NAO ENCONTRADO de tb_veic_user o ID_veic_uso onde kmf=null');
}
} // erro interno em tx.executeSql
);
});
});
};
useEffect(() => {
findByUserna( route.params.paramKey )
.then(
findByV(route.params.paramKey)
.then(
d => {
setDados(d)
}
)
)
.then(console.log('use effect 0 ------>',dados))
.then(
dados.map(item =>
setIDVeic(item.ID_veic_uso)
),
)
.then(console.log('use effect 1 ------>',IDVeic))
},[])
每次我在 vs code 1 中保存文件时 useState 都有效
2个回答
state
的
setter
函数在 React Native 中是异步的。因此,如果在
useEffect
中设置状态对象后直接
console.log
,它将不会显示更新后的状态。
但是,
state
更改将触发组件的重新渲染,并且框架保证
state
将在下一个渲染周期中包含更新后的值。
我们可以通过将
console.log
放在
useEffect
之外来验证这一点。
const [dados, setDados] = useState([]);
useEffect(() => {
findByV(route.params.paramKey)
.then(
d => {
setDados(d),
},
)
},[])
console.log('data', dados)
我们会注意到两条日志消息。第一个是一个空数组,它是状态
dados
的初始值。
useEffect
有一个空的依赖数组,因此如果组件挂载,它将被触发一次。如果我们使用
setDados
设置新状态,它将触发新的渲染周期,整个组件将再次渲染。这次
useEffect
将不会被触发,但
state
包含新值。
David Scholz
2022-03-28
问题是我在代码末尾的条件中使用了 const 'data'(如果 'data' 不为空,则会呈现某些组件)。而这并没有读取 'IDVeic'
return (
<Image
style={fundoVeic.imageLogo}
source={require('../../imagens/aaa.png')}
/>
{IDVeic === null ?
<View>...</View>
:
<View>...</View
}
Mares
2022-03-28