在useEffect中设置状态后，无法呈现状态变量

Question

我有一个ionic react应用程序，当应用程序打开时，我想在其中显示数据库中的数据，但只有在我导航到另一个选项卡然后返回到原始选项卡后，才会显示值。我将添加到数据库中，并希望每次用户导航到该选项卡时都能显示最新的值

我已经尝试过useIonViewWillEnter和useEffect，但它们都没有按照我希望的方式工作。

有没有什么方法可以让我在打开应用程序时显示值，然后在每次导航到该选项卡时更新并显示新值？

这是我试图呈现的页面：

const Tab1: React.FC = () => {
const [loans, setLoans] = useState<Loan[]>()
useEffect(() => {
setLoans(getAllLoans())
console.log(loans)
}, []);

return (
<IonPage>
<IonHeader>
<IonToolbar color="primary">
<IonTitle>Select A Loan</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
<IonList>
{loans && loans.map((loan) => <IonItem><IonText>{loan.name} {loan.principle} {loan.interest}</IonText></IonItem>)}
</IonList>

</IonContent>
</IonPage>
);
};

这就是我获取数据的函数。它返回我想显示的贷款阵列：

export const getAllLoans = (): Loan[] => {
const loans: Loan[] = []
try {
SQLite.create({
name: 'loan.db', location: 'default'
}).then(async (db: SQLiteObject) => {
try {
const create = await db.executeSql("create table if not exists loans(name VARCHAR(32) NOT NULL, principle REAL NOT NULL, interest REAL NOT NULL)", [])
const query = "SELECT * FROM loans"
const get = db.executeSql(query, []).then(data => {
for(let i=0; i < data.rows.length; i++){
loans.push({
name: data.rows.item(i).name,
principle: data.rows.item(i).principle,
interest: data.rows.item(i).interest
})
}
console.log(loans)
return loans;
});
//console.log('found: '+ loans);
return loans
} catch (e) {
console.log('SQL get error: ', e);
return loans
}
})
} catch(e) {
console.log('database get error ', e)
return loans
}
return loans
}

Answer 1

这可能是相关的-React在决定组件是否需要刷新时不会对数组元素进行深入比较。试试这个——

组件顶部：

const [toggleRefresh, setToggleRefresh] = useState(false);

然后在使用效果：

useEffect(() => {
setLoans(getAllLoans())
setToggleRefresh = (!toggleRefresh)
console.log(loans)
}, []);

如果它有效，则意味着React不知道loans的元素已经更改，因此不会对组件进行重新渲染。

Answer 2

由于SQLite.create是异步的，因此必须使用await it，还必须使函数getAllLoans与export const getAllLoans = async (): Loan[] => {异步

所以，你想这样做：

let db = await SQLite.create(...);