Блог

Я использую react navigation для навигации между страницами. У меня есть 2 страницы. Давайте назовем их A и B. У меня есть несколько карточек на странице A, и на карточках есть осязаемые непрозрачности для перехода на страницу B с идентификатором (используя этот идентификатор для получения данных с сервера).

При первой навигации от A до B все работает хорошо. Но когда я возвращаюсь на страницу A из sidemenu и выбираю другую карточку (я имею в виду отправить другой идентификатор в качестве параметра на страницу B), он показывает мне ту же страницу с первой навигацией. Я выяснил изменения параметров навигации после рендеринга.

я пробовал этот жизненный цикл;

 export class TanksContent extends React.Component {
constructor(props){
super(props);
 this.state = {
  isLoading:true,
  tanks:[],
 }   
}

componentDidMount(){
 this.getData();
}

componentWillUnmount(){
 this.setState({
  isLoading: true
 });
}

componentWillUpdate(){
 this.getData();
}

getData(){
 //fetching data on here from server and set state for loading and data.
}

render(){
 if(this.state.isLoading){
  return(
    <View style={{flex: 1, padding: 20}}>
      <ActivityIndicator/>
    </View>
  )
 } 
return(
 // screen
)
 

Он обновляет страницу снова и снова… Так что это работает плохо. Как я могу остановить рендеринг до тех пор, пока параметр не изменится? (пользователь может снова выбрать тот же параметр)

Я решил эту проблему.

 componentDidUpdate(prevProps) {
 if(this.props.id!==this.state.id){
  this.setState({ 
    id:  this.props.id,
    isLoading: true
  });
  this.getData();
 }
}
 

с помощью этой функции. если кому-то нужна помощь по этому поводу, просто прокомментируйте, и я сделаю для вас все, что в моих силах.