React Native：在Render中调用的函数，循环运行

Question

This is my code :

  "use strict"; import React, {Component, PropTypes} from 'react'; import { ActivityIndicator, ListView, StyleSheet, Text, TextInput, View, TouchableOpacity, } from 'react-native'; import { Actions, ActionConst } from 'react-native-router-flux'; var SQLite = require('react-native-sqlite-storage'); var DeviceInfo = require('react-native-device-info'); import Icon from 'react-native-vector-icons/Ionicons'; var LOADING = {}; var db = SQLite.openDatabase({name : "oc.db", location: 'default'}); class Profile extends Component { constructor(props) { super(props); this.state = { users: [], dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }), }; } fetch(){ console.log('fetching data from database'); ////// var query = "SELECT * FROM users"; var params = []; var userlist = []; db.transaction((tx) => { tx.executeSql(query,params, (tx, results) => { var len = results.rows.length; for(var ind = 0; ind < len; ind++ ){ userlist[ind] = { userId: results.rows.item(ind).userId, userName: results.rows.item(ind).userName, userMail: results.rows.item(ind).userMail, active: results.rows.item(ind).active }; } this.setState({ users: userlist, }); }, function(){ console.log('Profile: Something went wrong'); }); }); ////////// } componentDidMount() { this.fetch(); } activate(uid){ console.log('Lets de-activate all accounts'); var query = "UPDATE users SET active='no' WHERE active=?"; var params = ['yes']; db.transaction((tx) => { tx.executeSql(query,params, (tx, results) => { console.log('all users should be de-active now'); console.log('activating user ', uid); var query = "UPDATE users SET active='yes' WHERE userId=? LIMIT 1;"; var params = [uid]; db.transaction((tx) => { tx.executeSql(query,params, (tx, results) => { console.log('UserId ' , uid , ' is Active now'); this.renderUsers(); //Actions.bridge({type: 'reset', toGo: 'home'}); }, function(){ console.log('No such a user found to make active'); }); }); }, function(){ console.log('No such a user found to make active'); }); }); } resetNav(){ Actions.bridge({type: 'reset'}); } renderUsers(){ console.log('Rendering Users'); //this.fetch(); var ulist = this.state.users; var urow = []; for(let a=0; a < ulist.length; a++){ let active = ulist[a].active === 'yes' ? '◉' : '◯'; let usid = ulist[a].userId; urow.push( <TouchableOpacity key={a} onPress={() => { this.activate(usid); /* this.resetNav(); */ }} style={styles.uitem}> <Text style={styles.uText}>{ulist[a].userName} {ulist[a].userMail}</Text> <Text style={styles.uTextAct}>{active}</Text> </TouchableOpacity> ); } return( <View style={styles.ulist}>{urow}</View> ); } render() { return ( <View style={styles.container}> <Text style={styles.pic}> <Icon name="ios-person" color="#00a2dd" size={180}></Icon> </Text> <Text style={styles.heading}> Welcome to your Profile page!{'\\n'} </Text> <Text style={styles.listtitle}>Users List</Text> <Text style={styles.listdesc}>To switch between accounts, simply click on them.</Text> {this.renderUsers()} </View> ); } } 

Results are shown, it's working. but problem is renderUsers() is running in a loop. it's being called forever. where am i wrong? any solutions please?

---

Update : When i put this.fetch to renderUsers() , it's fine. when you select a user, it will be active and you can see the list is updating. but problem is list being updated in a loop. it's happening ever and ever again.

when i put this.fetch to componentdidmount , the loop problem is fixed, but when you change active user, list is not being updated.

Answer 1

I found the solution. in activate function, i added the Actions.refresh method from router-flux and i added this.setState in componentwillreceiveprops. now it's working as expected. final code is like this :

changes :

 ////Added this code : componentWillReceiveProps() { this.fetch(); this.setState({ somekey: 'yes' }); } /// Added Actions.refresh({somekey: 'Yes'}); with some random props activate(uid){ console.log('Lets de-activate all accounts'); var query = "UPDATE users SET active='no' WHERE active=?"; var params = ['yes']; db.transaction((tx) => { tx.executeSql(query,params, (tx, results) => { console.log('all users should be de-active now'); console.log('activating user ', uid); var query = "UPDATE users SET active='yes' WHERE userId=? LIMIT 1;"; var params = [uid]; db.transaction((tx) => { tx.executeSql(query,params, (tx, results) => { console.log('UserId ' , uid , ' is Active now'); this.renderUsers(); Actions.refresh({somekey: 'yes'}); //Actions.bridge({type: 'reset', toGo: 'home'}); }, function(){ console.log('No such a user found to make active'); }); }); }, function(){ console.log('No such a user found to make active'); }); }); } 

Hope it will help others who have the same issue