Question

我正在使用反应导航在页面之间导航。我有2页。我们将它们称为A和B。我在A页上有一些卡，并且卡上具有可触摸的不透明性，可以使用ID（使用此ID从服务器获取数据）导航到B页。

在从A到B的第一次导航中，一切正常。但是，当我从侧面菜单返回页面A并选择另一张卡片（我的意思是将另一个ID作为参数发送到页面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
)

它一次又一次刷新页面...因此效果不佳。在参数更改之前，如何停止渲染？（有可能用户再次选择相同的参数）

Answer 1

我解决了这个问题。

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

具有该功能。如果有人需要帮助，请发表评论，我会尽力为您服务。

重新呈现页面前如何获取导航参数

1 个答案: