Calling a function after entering a page

Asked

Viewed 33 times

-1

Good afternoon, I am working on a React Active application and I am having problems when I need to reload a value when it is already set, the function listingCurso can receive the course, but when I come back from the page and click again in another course it keeps getting the same, only when I reload the page it manages to call _onRefresh and the correct course.

The question is, how can I call the Bear() list function, every time this component is called.

Here is where the component is called.

this.props.navigation.navigate('CursosComprar', {
                            idCurso: curso.id,
                            data: data
                          })

And here’s the component.

export default class CursosComprar extends Component {
  constructor (props) {
    super(props)
    this.state = {
      loading: true,
      token: '',
      idCliente: '',
      idCurso: '',
      curso: []
    }
  }


  async listarCurso() {
    this.setState({
      idCurso: await AsyncStorage.getItem("idCurso"),
      token: await AsyncStorage.getItem("token"),
      idCliente: await AsyncStorage.getItem("idCliente"),
      loading: false,
    });
    api
      .get(
        `app/cliente/${this.state.idCliente}/${this.state.token}/curso-cliente/${this.state.idCurso}`
      )
      .then(res => {
        this.setState({
          curso: res.data[0],
          loading: false
        })
      })
  }

  
  shouldComponentUpdate (newProps, newState) {    
    
    return (
      newState.curso !== this.state.curso ||
      newState.loading !== this.state.loading
    )
  }

  componentDidMount () {
    this.listarCurso();
  } 

  _onRefresh = () => {
    this.setState({
      refreshing: true
    });
    this.listarCurso();
    this.setState({
      refreshing: false
    });
  }

  render () {
      return (
        <View style={styles.root}>
            <StatusBar backgroundColor='rgba(9,172,177,1)' />
            <View style={styles.tabs1}>
            </View>
            <HeaderX button='Settings' style={styles.headerX}></HeaderX>
              <View style={styles.container, styles.scrollArea1}
                    ><ScrollView
                    horizontal={false}
                    contentContainerStyle={styles.scrollArea1_contentContainerStyle}
                    refreshControl={
                      <RefreshControl
                        refreshing={this.state.refreshing}
                        onRefresh={this._onRefresh}
                      />
                    }
                  >
                        <Text style={styles.text1}>{this.state.curso.nome}</Text>
                        <Text style={styles.text2}>{this.state.curso.descricao}</Text>
                        <Text style={styles.text3}>Preço: R$ {this.state.curso.preco}</Text>
                        <TouchableOpacity key={this.state.idCurso} onPress={async () => {
                              let data = moment().format()
                              this.props.navigation.navigate('TelaCartao', {
                                idCurso: this.state.idCurso,
                                data: data
                              })
                            }} style={styles.appButtonContainer}>
                            <Text style={styles.appButtonText} >Comprar Agora</Text>
                        </TouchableOpacity>
                  </ScrollView>
            </View>    
        </View>
        
      )
    }
  
}```
react react-native

1 answer

1

I think you could try calling the function by placing the onload attribute in the HTML body tag you’re using... something like:

<body onload="listarCurso()">

Have you tried that?

  • There is no body in the component, because it is an React Native application.

Browser other questions tagged react react-native

You are not signed in. Login or sign up in order to post.