web-dev-qa-db-ja.com

Reactネイティブのリロードページ

だから私は活動のあるアプリを持っています。アプリは最初にインターネット接続を確認します。インターネット接続がない場合は、ページを更新するためのボタンが画面に表示されます。問題は、私のAPI呼び出し（Axios）がcomponentDidMount()にあり、最初のレンダリング後に一度だけ呼び出されることです。ページをリロードしてcomponentDidMountを再度呼び出す方法はありますか？

完全リフレッシュのようなものです。 EXPOを使用しています。どんな助けでもありがたいです。申し訳ありませんが、例はありません。可能であれば、アイデアを知りたかっただけです。

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

コンポーネントを強制的に更新できます。これを確認してください： https://reactjs.org/docs/react-component.html#forceupdate

コンポーネントを再レンダリングします。

この例を確認してください：

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

コンポーネント内の独自の関数にAPI呼び出しを配置することをお勧めします。 componentDidMountとボタンのクリックの両方でAPI呼び出しを行いたい場合は、makeApiCall()関数を作成し、それをcomponentDidMount内から呼び出します。次に、ボタンに対してonPressプロップを適切に設定しますonPress={this.makeApiCall}

0
Nunchucks

コンポーネントでsetState関数を呼び出すことで、コンポーネントを更新できます。ページを更新するボタンがある場合は、次のようにします。

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

setStateを呼び出すと、渡したオブジェクトに関係なくコンポーネントが更新されます。ページを再レンダリングしてcomponentDidMount関数を呼び出すかどうかわからないので、API呼び出しをいくつかの関数funcに移動して、この関数をcomponentDidMountで呼び出す必要があるかもしれません、および各ボタンを押すイベントの後も。例：

componentDidMount() {
  apiCalls()
}

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

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

  </View>
}
0
Shadow_m2