React Native 更新数据的状态变量更改

Question

我正在尝试执行一个函数，每当用户来到数组末尾时，该函数都会更新用户数据，如下所示：

componentDidUpdate = () => {
if (this.state.isLoading == false && this.state.Users.length == this.state.currentIndex) {
this.loadUsers()
}
}

这是 loadUsers(( 函数

loadUsers = () => {
Users = [
]
var query = firebase.database().ref("users").orderByKey();
query.once("value")
.then((snapshot)  => {
snapshot.forEach((childSnapshot)  => {
// key will be "ada" the first time and "alan" the second time
var key = childSnapshot.key;
// childData will be the actual contents of the child
var childData = childSnapshot.val();
getFilmDetailFromApi(childData.filmID).then(data => {
km = this.getDistance(this.state.userData.latitude, this.state.userData.longitude, childData.latitude, childData.longitude)
photo0 = null;
photo1 = null;
photo2 = null;
photo3 = null;
photo4 = null;
photo5 = null;
if(childData.photo[0]) {
photo0 = {uri: childData.photo[0]}
}
if(childData.photo[1]) {
photo1 = {uri: childData.photo[1]}
}
if(childData.photo[2]) {
photo2 = {uri: childData.photo[2]}
}
if(childData.photo[3]) {
photo3 = {uri: childData.photo[3]}
}
if(childData.photo[4]) {
photo4 = {uri: childData.photo[4]}
}
if(childData.photo[5]) {
photo5 = {uri: childData.photo[5]}
}
var filmImage = data.poster_path
Users.push({ id: key, uri: photo0, uri1: photo1, uri2: photo2, uri3: photo3, uri4: photo4, uri5: photo5, nom: childData.name, age:childData.age, film: filmImage, description: childData.description, distance: km })
this.setState({ users: key });
})
this.setState({Users: Users});
});
this.setState({isLoading: false});
this.setState({currentIndex: 0});
});   
}

这就像火种卡一样，当我刷所有卡(this.state.Users.length == this.state.currentIndex(时，它呈现加载屏幕，从那里我想重新运行 loadUsers 函数以获得新用户，但当我运行应用程序时，我得到："超过最大更新深度"。

Answer 1

LoadUsers 加载用户并设置状态，这会导致加载屏幕的重新渲染。然后加载屏幕再次运行 LoadUser 再次对流进行尝试。

编辑1：至少，您必须有一些逻辑来更新加载状态：

检查修改后的代码：

loadUsers = () => {
Users = [
]
var query = firebase.database().ref("users").orderByKey();
query.once("value")
.then((snapshot)  => {
snapshot.forEach((childSnapshot)  => {
// key will be "ada" the first time and "alan" the second time
var key = childSnapshot.key;
// childData will be the actual contents of the child
var childData = childSnapshot.val();
this.setState({isLoading: true});
getFilmDetailFromApi(childData.filmID).then(data => {
km = this.getDistance(this.state.userData.latitude, this.state.userData.longitude, childData.latitude, childData.longitude)
photo0 = null;
photo1 = null;
photo2 = null;
photo3 = null;
photo4 = null;
photo5 = null;
if(childData.photo[0]) {
photo0 = {uri: childData.photo[0]}
}
if(childData.photo[1]) {
photo1 = {uri: childData.photo[1]}
}
if(childData.photo[2]) {
photo2 = {uri: childData.photo[2]}
}
if(childData.photo[3]) {
photo3 = {uri: childData.photo[3]}
}
if(childData.photo[4]) {
photo4 = {uri: childData.photo[4]}
}
if(childData.photo[5]) {
photo5 = {uri: childData.photo[5]}
}
var filmImage = data.poster_path
Users.push({ id: key, uri: photo0, uri1: photo1, uri2: photo2, uri3: photo3, uri4: photo4, uri5: photo5, nom: childData.name, age:childData.age, film: filmImage, description: childData.description, distance: km })
this.setState({ users: key, isLoading: false });
})
this.setState({Users: Users});});
this.setState({currentIndex: 0});
});   
}

Answer 2

您收到此错误是因为您正在尝试在循环中设置状态，并且一旦状态发生变化，已达到重新呈现视图的最大限制。尝试在 foreach 循环结束后(循环外(将用户设置为this.setState({ Users: Users });。this.setState({ users: key });这可能还需要类似的方法。