返されたネイティブ関数は何も返さない

Question

私はここで簡単なことをしようとしています - sqliteデータベースに接続し、レコードの数を返します。以下のコードではlen変数をconsole.logで出力できますが、何も返されません。私は明白な何かを欠いていますかありがとう。

const db = SQLite.openDatabase({ name: 'favorites.db' }); 
export default class PlayerScreen extends React.Component { 

    fetch(){ 
     console.log('fetching data from database'); 
     var query = "SELECT * FROM items"; 
     var params = []; 
     db.transaction((tx) => { 
      tx.executeSql(query,params, (tx, results) => { 
      var len = results.rows.length; 
      return len; 

      }, function(){ 
      console.log('Profile: Something went wrong'); 
      }); 
     }); 

} 

render() { 

    return <Text>{this.fetch()}</Text> 

} 
} 

Answer 1

ここでは多くのことが間違っています。フェッチは非同期の概念であり、リアクションのレンダリングは同期的です。レンダリングメソッド内でフェッチなどを非同期で使用することはできません。

代わりに、どうすればいいですか？

まず、コンポーネントのcomponentDidMountでフェッチを実行します。 はまた

componentWillMount() { 
    this.state = { length: 0 }; 
} 

componentDidMount() { 
    // I use call here to make sure this.fetch gets the this context 
    this.fetch.call(this); 
} 

第二componentWillMountに初期状態を設定し、

fetch() { 
    var query = "SELECT * FROM items"; 
    var params = []; 
    db.transaction((tx) => { 
     tx.executeSql(query,params, (tx, results) => { 
     var len = results.rows.length; 

     // this.setState will trigger a re-render of the component 
     this.setState({ length: len }); 

     }, function(){ 
     console.log('Profile: Something went wrong'); 
     }); 
    }); 
} 

今すぐあなたのフェッチ方法でコンポーネントのinnerStateに結果を添付してrenderメソッドでは、あなたはthis.stateを使用することができます.lengthを使用して値をレンダリングします。

render() { 
    return <Text>{this.state.length}</Text> 
} 

これは