Question

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

我已经尝试过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不会对数组元素进行深层比较。试试这个-

在组件顶部：

import selenium driver = webdriver.Chrome() driver.get('https://www.dx.com/p/creality-cr10-v2-upgrade-ultraquiet-twoway-sphenoid-cooling-3d-printer-eu-plug-2711457.html#.Xy6c1SgzZhE') price = driver.find_elements_by_class_name('low-sale-price') p = price if not p: print('Printer out of stock') if price != "": for val in price: a = val.text b = str(a) print(b) # refresh price element list before re-iterating the loop price = driver.find_elements_by_class_name('low-sale-price') break

然后在useEffect中：

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

如果有效，则意味着React不知道useEffect(() => { setLoans(getAllLoans()) setToggleRefresh = (!toggleRefresh) console.log(loans) }, []);的元素已更改，因此不会在组件上进行重新渲染。

Answer 2

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

因此，您想要这样做：

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

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

2 个答案: