javascript - 如何在 React Native 中渲染组件之前对从 firebase 接收的数据数组进行动态排序

Question

我正在使用 react native 和 firebase 为我在大学的最后一年项目开发一个移动应用程序。在应用程序中有一个我正在显示卡片的屏幕，每张卡片代表一场未来的足球比赛。我希望卡片以排序方式显示。我已经编写了排序函数，但它没有生效，因为我怀疑我没有将它放在正确的位置。我尝试将它放在构造函数中（没有生效，但这或多或少是预期的），当我将它放在渲染中时，我收到以下错误：

超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。React 限制了嵌套更新的数量以防止无限循环。

你可以在下面找到我的代码。

import React from "react";
import { Button, StyleSheet, Text, TextInput, View, ScrollView } from "react-native";
import { connect } from 'react-redux';
import * as firebase from 'firebase';


import { watchUserData } from './../redux/app-redux';
import Card from '../components/Card';

const mapStateToProps = (state) => {
  return {
    userData: state.userData,
   };
 }
 const mapDispatchToProps = (dispatch) => {
  return { 
    watchUserData: () => dispatch(watchUserData()),
  };
 }

class AdvancedSearchScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      games: []
    }
    this.props.watchUserData();
    var database = firebase.database();
  }
  sortGameArray(gameArray){
    var arraySize = gameArray.length;
    for (var i = 0; i < arraySize-1; i++){
      for (var j = 0; j < arraySize-i-1; j++){
        if (Date.parse(gameArray[j].gameDate) > Date.parse(gameArray[j+1]))
                {
                    var temp = gameArray[j];
                    gameArray[j] = gameArray[j+1];
                    gameArray[j+1] = temp;
                }
        else if (gameArray[j].gameTime == Date.parse(gameArray[j+1])){
          if(gameArray[j].gameTime.replace(':','') > gameArray[j+1].gameTime.replace(':',''))
          {
                    var temp = gameArray[j];
                    gameArray[j] = gameArray[j+1];
                    gameArray[j+1] = temp;
          }
        }
      }
    }
    this.setState({games: gameArray})
  }
 componentDidMount() {
   var database = firebase.database();
   var commentsRef = firebase.database().ref('games');
   commentsRef.on('child_added', (data) => {
     const newItem = data.val()
     if (this.state.games===[]) {
      this.setState({games: [newItem]}) ;
     }         
      else{
         this.setState({games: [...this.state.games, newItem]});
     }
   });
   this.sortGameArray(this.state.games);
  }
  render() {
    return(
    <ScrollView>
    <View style={styles.container}> 
      <View style={styles.header}>
          <Text style={styles.headerTitle}>
              <Text style={{color: 'black'}}>Team</Text>
              <Text style={{color: '#339CFF'}}>Up</Text>
          </Text>
      </View>
      {this.state.games.map(type => <Card gameData = {type} navigation={this.props.navigation} />)}
    </View>
    </ScrollView>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    marginBottom: 40,
    height: '7%',
    flexDirection: 'row',
    borderBottomColor: '#339CFF',
    borderBottomWidth: 1,
},
headerTitle: {
    marginTop: '5%',
    paddingTop: '2%',
    marginLeft: '5%',
    fontSize: 25,
    fontWeight: 'bold',
    flex: 1,
},
});

export default connect(mapStateToProps, mapDispatchToProps)(AdvancedSearchScreen);

我真的很感激任何帮助。谢谢

标签： javascriptfirebasereact-native