反应本地路由器流量;加载回先前组件的速度很慢

时间:2019-07-31 18:32:05

标签: react-native react-router react-native-router-flux

我在Card组件中使用react-native-router-flux链接到我的playerPage组件。

这是我的卡组件:

class Card extends Component {
  state = {
    visible: false,
    currentUser: ''
  }

  componentDidMount() {
    if(this.props.player !== undefined){
      axios.get(`http://localhost:4000/reports?players=${this.props.player}&startDate=2019-03-20T03:10:43.990Z&sort=date`)
      .then(response => {
          console.log(response)
          this.props.loadCards(response.data)
      })
    } else if(this.props.team !== undefined) {
      axios.get(`http://localhost:4000/reports?team=${this.props.team}&startDate=2019-03-20T03:10:43.990Z&sort=date`)
      .then(response => {
          console.log(response)
          this.props.loadCards(response.data)
      })
    } else if(this.props.league !== undefined) {
      console.log('got here')
      axios.get(`http://localhost:4000/reports?league=${this.props.league}&startDate=2019-03-20T03:10:43.990Z&sort=date`)
      .then(response => {
          console.log(response)
          this.props.loadCards(response.data)
      })
    } else {
      axios.get(`http://localhost:4000/reports?league=NBA&league=NFL&league=MLB&startDate=2019-03-20T03:10:43.990Z&sort=date`)
                  .then(response => {
                      this.props.loadCards(response.data)
                  })
      Auth.currentAuthenticatedUser()
      .then((data) => {
          this.props.loadFilters(data.attributes.sub)
          this.setState({currentUser: data})
      })
    }

  }

  render() {

    let cardValues = this.props.search === null ? this.props.card : this.props.search

    return (
        <View >
          { 
            cardValues != null ?
              cardValues.map((v,i) => {
                return(
                <View key={i}>
                  <Collapse 
                  >
                    <CollapseHeader
                    >
                      <View>
                        <Text>
                          <Icon 
                            name={this.iconName(v.player.team.league.acronym)}
                            size={12}
                            color='black'/>{'   '}
                          <Text
                            onPress={
                              ()=> {
                                Actions.playerPage({
                                  player: v.player._id
                                })
                              }
                            }
                            >{v.player.player_name} - </Text>
                        </Text>
                        <Text>
                        <View>
                        </View>
                      </View>
                      <View>
                      </View>
                    </CollapseHeader>
                  </Collapse>
              </View>
                )
              })
          : null
          }
        </View>
    )
  }

}
 export default connect(mapStateToProps, { loadCards, countMore, loadFilters })(Card))

这是我的playerPage组件:

PlayerPage = (props) => { 
    return(
        <View>
            <Header
                rounded
            >
                <View style={{flexDirection: 'row', flexWrap: 'wrap', right: '43%', top: '50%', paddingBottom: 900}}>
                    <Icon name='chevron-left' size={10} color='#006FFF' />
                    <NativeText
                        onPress={() => {Actions.fullApp()}}
                        style ={{color: '#006FFF', fontSize: 12, fontFamily: 'Montserrat-Regular', top: '900%' }}
                    >
                        Back
                    </NativeText>
                </View>
            </Header>
            <Card
                player={props.player}
                team={props.team}
                league={props.league}
            />
        </View>
    )
}

export default PlayerPage

当我链接到playerPage时,我会在playerPage上呈现Card的新版本。

playerPage上显示的数据由Card组件的componentDidMount中的API调用确定。

我最初使用onPress={ ()=> {Actions.playerPage({player: v.player._id})}}

定向到playerPage

这很好。

当我将用户引导回具有Card组件的fullApp组件时,数据加载会更加缓慢。

它是这样的: https://streamable.com/ugc0b

有什么想法为什么加载缓慢?那是我的问题。

0 个答案:

没有答案