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> 
} 

希望这可以帮助你