关于获取数据库中的数据和设置进度条的建议

Question

我已经把学号和读过的书数存入数据库了。现在，我已经实现了获取学生阅读书籍数量的详细信息的方法。但是函数 progressbardata() 没有 return 从查询中获取的数据。我试图在 db.transaction() 中手动分配一个值并 returned 但没有成功。

你能告诉我我哪里做错了吗？此方法也循环多次。我们该如何解决这个问题。

import * as Progress from 'react-native-progress';
import { openDatabase } from 'react-native-sqlite-storage';
var db = openDatabase({ name: 'UserDatabase.db' });
let progressbardata = (id) => {
    var totalItems=0;
    db.transaction((tx) => {
      tx.executeSql('SELECT * FROM student where id = ?', [id], (tx, results) => {
          totalItems = results.rows.item(0).percent;
          return (totalItems);
      })
    })
}
const _renderContent = (item, index) => {
return (
<View>
   <Progress.Bar color='#68FF33' progress={progressbardata(item.id)}/>
   </View>
)
}

Answer 1

我的猜测是获取数据的请求是异步的，这段代码似乎不等待响应继续。因此，当获取请求尚未返回值时，代码将继续。如果是这种情况，我建议你让请求设置组件的状态，并将状态作为Progress.Bar组件的输入。这样，当获取请求异步完成时，将设置状态并更新进度条。这看起来像这样：

import * as Progress from 'react-native-progress';
import { openDatabase } from 'react-native-sqlite-storage';
import { useState } from 'react'
var db = openDatabase({ name: 'UserDatabase.db' });

const renderContent = (props) => {

    [progress, setProgress] = useState(0)

    let progressbardata = (id) => {
            var totalItems=0;
            db.transaction((tx) => {
                  tx.executeSql('SELECT * FROM student where id = ?', [id], (tx, results) => {
                  totalItems = results.rows.item(0).percent;
                  setProgress(totalItems);
              })
            })
        }

    progressbardata(props.id)

    return (
    <View>
       <Progress.Bar color='#68FF33' progress={progress}/>
       </View>
    )
}

关于获取数据库中的数据和设置进度条的建议

Suggestion for fetch the data in database and set progress bar

progress-bar

react-native

react-native-sqlite-storage