Question

我正在使用React Native和Redux制作一个应用程序，在我的一个屏幕上，我有一个状态变量，该状态变量是从componentDidMount()上的商店中检索的，然后立即将其保存在本地状态变量中屏幕。所以我的componentDidMount()和componentDidUpdate()方法看起来像这样：

componentDidMount() {
  this.props.getA(); // this sets this.props.A
}

componentDidUpdate(prevProps) {
  if (!prevProps.A && this.props.A){
    this.setState({
      A: this.props.A
    })
  }
}

问题：

如果我离开此屏幕然后再返回，则this.props.A仍然存在，但this.state.A不存在。我知道为什么会发生这种情况，但是我想知道每次导航回到这样的屏幕时重新设置this.state.A的最佳做法是什么。

我的问题：

安装屏幕时，将触发componentDidMount()。当您导航回已安装的组件时，是否会触发某些事件？我知道我可以通过创建另一个状态变量来做到这一点，该状态变量在每次导航时都会自动切换，或者可以调用forceUpdate()之类的东西，但是我想要最干净的解决方案。有什么想法吗？

谢谢！

Answer 1

不建议采用上述声明方式。

从道具初始化状态在大多数情况下，这是一种反模式。   不要“将道具复制到状态中”。它为   您的数据，通常会导致错误。最好的真理之一。

组件的属性更改时，组件将已经重新渲染，因此   无需将道具复制为状态，然后尝试使其保持最新状态   日期。

请点击此链接https://daveceddia.com/where-initialize-state-react/。

当您导航回已安装的组件时，可以直接使用道具。

Answer 2

假设您使用的是React Navigation 3.0，那么Drawer Navigator在早期版本中的行为会有一些变化。就像在React Navigation文档中一样，

以前，使用抽屉式导航器时，屏幕会卸载非活动状态，当您切换回它们时，您需要重新渲染整个事情。在选项卡中，这些保留在您希望的内存中，因此切换到屏幕后，再次返回该屏幕的速度更快而且您不会在滚动视图或其他任何内容中失去自己的位置。现在抽屉行为相同，但是如果您可以回到原来的行为就像通过在抽屉中传递unmountInactiveRoutes: true 导航配置。

只需将unmountInactiveRoutes: true添加到导航选项。像这样

const MainStack = createDrawerNavigator({
  //your routes
}, {
  contentComponent: SideMenu,
  drawerWidth: wp('69%'),
  unmountInactiveRoutes: true
}

导航回它时更新已安装的屏幕

2 个答案: