0

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

我已经尝试过 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
}
4

2 回答 2

0

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

在组件的顶部：

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

然后在useEffect中：

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

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

于 2020-08-09T17:40:44.800 回答
0

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

所以，你想这样做：

let db = await SQLite.create(...);
于 2020-08-10T19:18:41.877 回答