React本機函數什麼都不返回

Question

我想在這裏做一些簡單的事 - 連接到一個sqlite數據庫並返回記錄數。在下面的代碼中，我可以用console.log輸出len變量，但是沒有任何東西會被返回。我錯過了明顯的東西嗎？謝謝。

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

很多事情都是錯誤的。 Fetch是一個異步概念，React渲染是同步的。你不能在render方法內異步使用提取或任何東西。

那麼，你應該怎麼做呢？

首先，在組件的componentDidMount中執行獲取。 此外，在componentWillMount設置初始狀態

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

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

其次，在你的fetch方法附加結果到組件的innerState現在

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'); 
     }); 
    }); 
} 

，在渲染的方法，你可以使用this.state .length來呈現值。

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

希望這可以幫助你