Javascript 使用以前的导航参数，然后使用新的参数进行反应导航装载

我们在React Native+React导航应用程序中看到一个奇怪的行为，因此我们创建了一个简单的示例来演示

我们有两个屏幕：A和B

在屏幕A上，有两个按钮分别导航到屏幕B。第一个按钮传递参数id:1，第二个按钮传递id:2

在屏幕B上，我们正在控制台上记录render（）方法和componentDidMount（）方法中的入站参数

如果我在屏幕A上单击id为1的按钮，屏幕B上的参数输出将在render（）和componentDidMount（）中记录为id:1。但是，如果我随后返回并快速单击id为2的按钮，则记录的输出首先显示为id:1，然后显示为id:2。按以下顺序：

第一次单击：

渲染：1

组件安装：1

（然后返回，然后快速：）

第二次单击

渲染：1

渲染：2

组件安装：1

组件安装：2

以前安装的组件的幽灵似乎仍然困扰着我们的应用程序。此外，这感觉像是一种竞赛条件，因为你必须快速点击召唤鬼魂，缓慢点击不会导致这种行为

以下是整个应用程序：

从“React”导入React
从“react native”导入{View，Text，TouchableOpacity}
从“反应导航”导入{StackNavigator}
类ScreenA扩展了React.Component{
render（）{
const{navigation}=this.props；
报税表（
{navigation.navigate（'ScreenB'，{id:1}）}>
按钮1
{navigation.navigate（'ScreenB'，{id:2}）}>
按钮2
)
}
}
类ScreenB扩展了React.Component{
componentDidMount（）{
console.log（“%c componentDidMount:”+this.props.navigation.state.params.id，'填充：2px；背景：蓝色；颜色：#fff'）
}
render（）{
console.log（“%c render:”+this.props.navigation.state.params.id，'填充：2px；背景：绿色；颜色：#fff'）
报税表（
this.props.navigation.goBack（）}>
按钮
)
}
}
const Router=StackNavigator({
ScreenA:{screen:ScreenA}，
ScreenB:{screen:ScreenB}
})
导出默认类App扩展React.Component{
render（）{
返回(
)
}
}
这里的问题是
导航。导航的工作原理。如果在未向下一屏幕传递键的情况下使用它，
react navigation
将与已安装的屏幕不匹配，因此将安装另一个屏幕

您可以在这里看到的正是组件尚未卸载但navigate不知道并呈现同一组件的另一个实例的情况

您可以通过将键参数传递到
navigate
功能中来防止这种情况，如下所示：

navigation.navigate({routeName: 'ScreenB', key: 'ScreenB', params: { id: 1}})

navigation.navigate({routeName: 'ScreenB', key: 'ScreenB', params: { id: 2}})

现在
StackNavigator
可以检查是否已经存在具有相同键的屏幕，并阻止其安装。
我们完全误解了键的用途。非常感谢你，你太棒了。