aksonov / aksonov/react-native-router-flux

React native router flux slow to render component heading back to previous component

Aberta
#3,532 0 comentários 1 reação 0 responsáveis Ver no GitHub
Linguagem predominante
JavaScript
Estrelas
8.9k
Forks
2.1k
Métricas de merge de PRs
Nenhum PR com merge em 30d

Descrição

I'm using react-native-router-flux in my Card component to to link to my playerPage component.

This is on version 4.0.6.

This is my Card component:
```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 (

{
cardValues != null ?
cardValues.map((v,i) => {
return(





{' '}
{
Actions.playerPage({
player: v.player._id
})
}
}
>{v.player.player_name} -










)
})
: null
}

)
}

}
export default connect(mapStateToProps, { loadCards, countMore, loadFilters })(Card))
```
This is my playerPage component:
```PlayerPage = (props) => {
return(




{Actions.fullApp()}}
style ={{color: '#006FFF', fontSize: 12, fontFamily: 'Montserrat-Regular', top: '900%' }}
>
Back





)
}

export default PlayerPage
```

When I link to playerPage I render a new version of Card on playerPage.

This is on react-native-router-flux version #4.0.6.

The data that is shown on playerPage is determined by the API call in the componentDidMount of the Card component.

I initially direct to playerPage with onPress={ ()=> {Actions.playerPage({player: v.player._id})}}

This loads fine.

When I direct a user back to the fullApp component, which has the Card component on it, the data loads, but much more slowly.

This is what it looks like: https://streamable.com/ugc0b

Any ideas why it loads slowly? That's my issue.

I've tried taking out all console.logs (a solution mentioned in similar issues), and I've tried shutting down remote debugger and hot loading (another solution mentioned before).

Guia de contribuição

Abrir o guia de contribuição

Avaliação

Esta issue ainda não foi avaliada.

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.