React Native Neu laden Seite

Question

Also habe ich eine App mit einer Aktivität. Die App sucht am Anfang nach der Internetverbindung. Wenn keine Internetverbindung besteht, wird ein Bildschirm mit einer Schaltfläche zum Aktualisieren der Seite angezeigt. Das Problem ist, dass meine API-Aufrufe (Axios) auf componentDidMount() befindet, wo es nur einmal nach dem ersten Rendern aufgerufen wird. Gibt es eine Möglichkeit, die Seite neu zu laden, so dass es wieder componentDidMount ruft?

Ich meine wie Total Refresh. Ich benutze EXPO BTW. Jede Hilfe wird geschätzt. Sorry, es gibt keine Beispiele, ich wollte nur die Idee, wenn möglich

Answer 1

Remember durch Aufrufen der Funktion SetState auf Ihrer Komponente, können Sie es aktualisieren. wenn es eine Taste ist, dass die Seite aktualisieren geht, würde ich dies tun:

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

Aufruf setState Ihre Komponente egal aktualisieren, was Sie das Objekt, das es passieren. Ich bin mir nicht sicher, ob die Seite erneut gerendert wird, Aufrufe componentDidMount Funktion, also vielleicht müssen Sie Ihre API-Aufrufe auf einige Funktionen func verschieben und rufen Sie diese Funktion in Ihrem componentDidMount, und auch nach jeder Taste drücken Ereignis. Beispiel:

componentDidMount() { 
    apiCalls() 
} 

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

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

    </View> 
} 

Answer 2

Sie können erzwingen, die Komponente zu aktualisieren. Überprüfen Sie: https://reactjs.org/docs/react-component.html#forceupdate

Es wird die Komponente erneut rendern.

Überprüfung dieses Beispiel:

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')); 

Answer 3

Ich würde vorschlagen, in seiner eigenen Funktion innerhalb Ihrer Komponente Ihres API-Aufruf setzen. Wenn Sie möchten, dass der API-Aufruf auf ComponentDidMount und auch auf eine Schaltfläche klicken, dann erstellen Sie eine makeApiCall() Funktion und rufen Sie das aus ComponentDidMount, dann für Ihre Schaltfläche setzen Sie einfach Ihre onPress Prop-onPress={this.makeApiCall}