组件的构造函数第二次不工作

Question

我有一个组件类：

class AutoPage extends Component {
constructor(props) {
super(props);
console.log("Auto is " + this.props.route.params.auto);
this.state = {
avto: this.props.route.params.auto,
}
this.array = [
this.state.avto.PICTURE,
];
for (let dopImage of this.state.avto.DOP_FOTO.VALUE) {
this.array.push(dopImage);
//console.log(avto);
}
}
}

我从另一个地方打开这个组件：

<TouchableOpacity onPress={() => navigate('AutoPage', {
auto: item
})}>

这是我的抽屉导航：

<Drawer.Navigator drawerContent={props => <CustomSidebarMenu {...props} />} width={Dimensions.get('window').width - 130}
component={CustomSidebarMenu}>
<Stack.Screen name="AutoListPage" component={AvtoListPageNav} />
<Stack.Screen name="AutoPage" component={AutoPage} options={{ headerTitle: "GorodAvtoPrime", headerTitleAlign: "center" }} /> 
</Drawer.Navigator>

当我单击TouchableOpacity时，AutoPage打开，它的构造函数工作。但当返回并再次单击TouchableOpacity时，AutoPage将打开，其构造函数不起作用。我正在this.props.route.params.auto中获取以前的数据。如何在每次单击TouchableOpacity时运行AutoPage的构造函数？

Answer 1

您可能想要订阅focus导航事件。屏幕正在重复使用，因此不会再次创建。

https://reactnavigation.org/docs/navigation-events

class AutoPage extends Component {
constructor(props) {
super(props);
this.state = {
avto: null,
}
}
componentDidMount() {
this._unsubscribe = this.props.navigation.addListener('focus', () => {
// Update your state here
});
}
componentWillUnmount() {
this._unsubscribe();
}
}