Страница перезагрузки React Native

Итак, у меня есть приложение с активностью. Приложение проверяет подключение к Интернету в начале. Если нет подключения к Интернету, он покажет экран с кнопкой для обновления страницы. Проблема в том, что мои вызовы API (Axios) расположены на componentDidMount(), где они вызываются только один раз после первого рендеринга. Есть ли способ перезагрузить страницу, чтобы она снова вызывала componentDidMount?

Я имею в виду полное обновление. Я использую EXPO кстати. Любая помощь приветствуется. Извините, что нет примеров, я просто хотел получить представление, если это возможно


react-native react-native-ios react-native-android expo
person Kevin Gozali    schedule 18.11.2017    source источник

Ответы (5)


arrow_upward
3
arrow_downward

Вы можете принудительно обновить компонент. Проверьте это: 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'));
person Sunil tc    schedule 03.12.2017
comment
Использование forceUpdate таким образом является антишаблоном. Если вы прочитаете свою ссылку, вы увидите, что в ней говорится: Обычно вы должны стараться избегать любого использования forceUpdate() и читать только из this.props и this.state в render(). Когда состояние или реквизиты, используемые в render(), изменяются, ваш компонент автоматически перерисовывается. - person Nunchucks; 13.01.2021

arrow_upward
3
arrow_downward

Я бы предложил поместить вызов API в собственную функцию fetchData в вашем компоненте. fetchData также может setState после успешной выборки, что приведет к повторному рендерингу и отображению свежих данных. Если вы хотите получить свежие данные из componentDidMount, а также по нажатию кнопки, создайте функцию fetchData и вызовите ее из componentDidMount, затем для вашей кнопки просто установите соответствующую поддержку onPress onPress={this.fetchData}

person Nunchucks    schedule 22.01.2018

arrow_upward
0
arrow_downward

Помните, что, вызвав функцию 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>
}
person Shadow_m2    schedule 18.11.2017

arrow_upward
0
arrow_downward

Вы можете просто обновить приложение React Native или Expo, выполнив следующие действия в функциональном компоненте.

Шаг 1

const [refreshPage, setRefreshPage] = useState("");

Шаг 2. Затем используйте его в любом компоненте, который вы хотите использовать, и обновите страницу, например, в предупреждении.

                Alert.alert(
                    "End of News",
                  "You have read all latest news for today ",
                  [
                    {
                      text: "Refresh Page",
                      onPress: () => {
                        setRefreshPage("refresh");
                        
                      },
                    },
                  ],
                  { cancelable: false }
                );

Это принесет предупреждение, когда пользователь нажмет кнопку обновления страницы, страница будет обновлена.

person Community    schedule 11.03.2021

arrow_upward
0
arrow_downward

Я использовал Functional component и сделал следующее. Я использовал состояние как зависимость в useEffect и изменил это состояние при нажатии кнопки.

const [internetCheck, setInternetCheck] = useState(0);
useEffect(() => {
  //code
}, [internetcheck]);

return(
  <Button title='Retry' onPress(() => setInternetCheck(internetCheck + 1)) />
)
person Vipul    schedule 06.07.2021