SQLite 数据库获取代码无法同步工作，因此我无法使用设置状态更新我的组件

Question

我正在尝试从 SQLite 数据库中获取数据，并在加载页面时将其呈现到我的本机平面列表中。但问题是数据获取需要一些时间，所以我的平面列表不会使用 setstate() 方法更新，因为 setstate 方法在从数据库获取数据之前执行。我正在使用 async await 和 promises 但我找不到解决方案。

我正在尝试异步等待、承诺等。

 async componentDidMount()  
 {
  const p=await this.datafun();

  this.setState({
  fdata:[...p],
  flag:false
    })
 }

    datafun()
 {
  var SQLite = require('react-native-sqlite-storage')
  const db= SQLite.openDatabase({name :'anand.db', createFromLocation : 1});
  db.transaction(  function (txn) {
  txn.executeSql('SELECT * FROM my_conyact ', [],   function (tx, res) {
  for (let i = 0; i <res.rows.length; ++i) 
  {
  this.state.fdata=[...this.state.fdata,{ UNIT: res.rows.item(i).column5 }];
  }
  }.bind(this));
  }.bind(this));

return new Promise((resolve)=>{
  resolve(this.state.fdata);
})
 }

我想在从数据库中获取数据并将值 return 写入 'const p' 后执行 setstate() 方法。

Answer 1

您的方向不错，但在如何使用 promise 方面存在一些错误。您做了 return 承诺，但没有执行承诺中的功能。

此外，我不确定是否推荐在 async 中强制转换 componentDidMount 语法，这里似乎更推荐一个关于它看起来像什么的想法

 componentDidMount()  
 {
    this.datafun().then(function(data) {
    this.setState({
        // HERE update your state
    })
  })
 }

    datafun()
 {
  var SQLite = require('react-native-sqlite-storage')
  const db= SQLite.openDatabase({name :'anand.db', createFromLocation : 1});

  return new Promise((resolve,reject)=>{
  db.transaction(  function (txn) {
    txn.executeSql('SELECT * FROM my_conyact ', [],   function (tx, res) {
      resolve(res);
     }); 
    })
    })
 }

Answer 2

datafun() {

    var SQLite = require('react-native-sqlite-storage')
    const db = SQLite.openDatabase({ name: 'anand.db', createFromLocation: 1 });
    return new Promise((resolve, reject) => {
      db.transaction(function (txn) {
        txn.executeSql('SELECT * FROM my_conyact ', [], function (tx, res) {
          resolve(res);
        });
      })
    })
  }
  componentDidMount() {
    this.datafun().then((dt) => {
      for (let i = 0; i < dt.rows.length; ++i) {
        this.state.fdata = [...this.state.fdata, { UNIT: dt.rows.item(i).column5 }]
      }

      this.setState(
        {
          fdata: [...this.state.fdata],
          flag: false,
        }
      )

    })
  }

终于明白了!!!

SQLite 数据库获取代码无法同步工作，因此我无法使用设置状态更新我的组件

SQLite database fetch code does not work synchronously therefore I cant update my component using set state

javascript

async-await

reactjs

es6-promise

react-native