web-dev-qa-db-fra.com

React Page de rechargement native

J'ai donc une application avec une activité. L'application vérifie la connexion Internet au début. S'il n'y a pas de connexion Internet, il affichera un écran avec un bouton pour rafraîchir la page. Le problème est que mes appels d'API (Axios) sont situés sur componentDidMount() où ils ne sont appelés qu'une seule fois après le premier rendu. Existe-t-il un moyen de recharger la page pour qu'elle appelle à nouveau componentDidMount?

Je veux dire comme un rafraîchissement total. J'utilise EXPO btw. Toute aide est appréciée. Désolé il n'y a pas d'exemples, je voulais juste avoir l'idée si possible

react-nativereact-native-androidreact-native-iosexpo
4
Kevin Gozali
        class MyScreen extends Component {
         constructor(props) {
         super(props)    
        this.state = {
          lastRefresh: Date(Date.now()).toString(),
        }
           this.refreshScreen = this.refreshScreen.bind(this)
          }

          refreshScreen() {
            this.setState({ lastRefresh: Date(Date.now()).toString() })
          }  

  render() {    
    return (    
      <View> 
    <Text>My Screen</Text>  
        <Text>Last Refresh: {this.state.lastRefresh}</Text>
            <Button onPress={this.refreshScreen} title="Refresh Screen" /> 
                </View>
        )
      }
    }

    // also put in main View Date(Date.now())
2
Shivo'ham 0

Vous pouvez forcer la mise à jour du composant. Vérifiez ceci: https://reactjs.org/docs/react-component.html#forceupdate

Il restituera le composant.

vérifiez cet exemple:

class App extends Component{
  constructor(){
    super();
        this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
  };

  forceUpdateHandler(){
    this.forceUpdate();
  };

  render(){
    return(
      <div>
          <button onClick= {this.forceUpdateHandler} >FORCE UPDATE</button>
            <h4>Random Number : { Math.random() }</h4>
          </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));
2
Sunil tc

Je suggère de placer votre appel API dans sa propre fonction au sein de votre composant. Si vous souhaitez effectuer l'appel d'API sur componentDidMount et également sur un bouton, cliquez sur, puis créez une fonction makeApiCall() et appelez-la à partir de componentDidMount, puis pour votre bouton, définissez votre accessoire onPress de manière appropriée onPress={this.makeApiCall}

0
Nunchucks

N'oubliez pas qu'en appelant la fonction setState sur votre composant, vous pouvez le rafraîchir. s'il y a un bouton qui va rafraîchir la page, je le ferais:

<Button  onPress={() => this.setState({dummy: 1})} />

l'appel de setState mettra à jour votre composant, quel que soit l'objet que vous lui transmettez. Je ne sais pas si le rendu de la page, appelle la fonction componentDidMount, alors peut-être que vous devez déplacer vos appels API vers une fonction func et appeler cette fonction dans votre componentDidMount , ainsi qu'après chaque événement de pression sur un bouton. exemple:

componentDidMount() {
  apiCalls()
}

apiCalls() {
   .... // your code
   this.setState({dummy: 1})
}

render() {
  <View>
    ...
    <Button  onPress={this.apiCalls.bind(this)} />
    ...

  </View>
}
0
Shadow_m2