重定向到屏幕时，componentDidMount 不起作用答案

【问题标题】：componentDidMount is not working when redirect to a screen重定向到屏幕时，componentDidMount 不起作用
【发布时间】：2018-11-28 17:52:48
【问题描述】：

我有componentDidMount 列出屏幕 A 中的一组文件（图像），从这个屏幕 A 我有另一个屏幕 B 链接，我可以在其中查看文件的详细视图，并且我可以选择删除文件。

当使用

调用屏幕 A 时

  <TouchableOpacity style={Styles.HomeButton} onPress={ () => this.props.navigation.navigate('Gallery')}>
     <Text style={Styles.HomeButtonText}>View Photos</Text>
  </TouchableOpacity>

componentDidMount 工作正常，但是当我在取消链接回调时删除文件（我使用 react-native-fs）时，我正在调用导航

this.props.navigation.navigate('Gallery');

重定向到屏幕 A 可以正常工作，但 componentDidMount 无法正常工作，这意味着我仍然可以在列表中看到已删除的文件。即屏幕A不刷新，有什么可能的解决办法吗？

【问题讨论】：

我认为即使您转到屏幕 B，屏幕 A 组件也永远不会卸载，您可以解决它的方法是将屏幕 A 上显示的所有文件列表添加到状态。并将回调函数作为道具传递给您更新状态 i 的屏幕 B 组件。 e.从文件列表中删除元素（文件）。希望这会有所帮助！

标签： react-native react-navigation react-lifecycle

【解决方案1】：

在 react-navigation 中，如果您导航到其他屏幕，组件将不会卸载，除非您在堆栈导航中重置堆栈。所以当你回到前一个屏幕时，因为它已经挂载了，componentDidMount 不会触发。

您可以绑定一个反应导航事件侦听器以在您返回屏幕时触发一些代码。

this.focusListner = this.props.navigation.addListener("didFocus",() => {
  // Update your data
});

卸载组件时不要忘记移除事件监听器。

componentWillUnmount() {
    // remove event listener
    this.focusListner.remove();
}

【讨论】：

很好，它工作正常，但是当我们删除列表中的最后一个文件时componentWillUnmount 不起作用，这意味着我无法删除监听器，有什么解决方案吗？

【解决方案2】：

您的componentDidMount() 不起作用的可能原因是屏幕 B 可能是模态的。

在模式的情况下，前一个组件不会卸载，下一个屏幕只是在它上面打开。因此，当您返回上一个屏幕时，它不会再次挂载。这就是您的列表没有更新的原因。

解决方案

您必须更改应该重新渲染的组件的状态。这里最好的解决方案，也是我也使用的，是像Redux 这样的状态管理库。因此，当您从屏幕 B 中删除项目时，只需相应地更新 redux 存储即可。因此，使用该 reducer 的每个组件都会重新渲染，您还可以将一次点击保存到您的服务器。

【讨论】：

完全相同的情况，我也在更新 redux 但仍然没有重新渲染该组件

【解决方案3】：

您应该考虑在导航的didFocus 事件中刷新您的列表。显然，如果您使用 A -> B 的堆栈导航，并且一旦您从 B 中删除文件并返回 A，前提是 A 已经在堆栈中，因此当您返回时 didMount 将不起作用。

因此，理想情况下，您必须在删除文件时使用 redux 中设置的某种标志刷新导航的 didFocus 事件列表，并且一旦返回 A，您就可以读取标志的状态并刷新您的相应地列出。

您可以参考this 以更好地了解navigation 道具和生命周期事件

【讨论】：

【解决方案4】：

您可能需要在此处查看 NavigationEvents API：https://reactnavigation.org/docs/en/navigation-events.html。

要解决您的问题，您想使用导航事件onDidFocus 而不是componentDidMount！

这是一种比使用命令式 API 更简单的方法，因为它负责订阅和取消订阅侦听器。

【讨论】：