Блог

Главная - Вопросы по программированию - Как заставить страницу обновляться каждый раз, когда вы открываете ее в react native?

Как заставить страницу обновляться каждый раз, когда вы открываете ее в react native?

#reactjs #react-native

Вопрос:

У меня есть экран MyEventsScreen в react native, который извлекает данные с сервера. На другом экране пользователи могут добавлять элементы в базу данных сервера, которые я затем хочу отобразить на экране MyEventsScreen.

Однако у меня проблема в том, что, когда я возвращаюсь на экран MyEventsScreen, я хочу вызвать сервер для автоматического повторного показа страницы. Есть ли способ сделать это?

Вот (упрощенный) код для MyEventsScreen.js:

 export default class MyEventsScreen extends Component {
  state = {
    tickets: [],
  };
  componentDidMount = () => {
    fetch("http://127.0.0.1:8000/api/fullticket/?userID=3", {
      method: "GET",
    })
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          tickets: responseJson,
        });
      })
      .catch((error) => {
        console.error(error);
      });
  };

render() {
    return (
          <View style={styles.container}>
            <FlatList
              style={{ flex: 1 }}
              data={this.state.tickets}
              renderItem={({ item }) => (
                <Item item={item}/>
              )}
              keyExtractor={(item) => item.ticketID}
            />
      </View>
    );
  }
}

Комментарии:

1. Вы должны использовать прослушиватель для запуска вызова обновления, как только ваш компонент будет сфокусирован. Сделай что-нибудь вроде this.props.navigation.addListener('focus', () => <update here>) этого . Кстати, вам следует рассмотреть возможность использования компонента функции вместе с useEffect крючком вместо компонентов класса.

Метки: ,