React Native：更新数据后未重新渲染组件

Posted 2023-02-22

【中文标题】React Native：更新数据后未重新渲染组件

【英文标题】：React Native: Didn't rerender the component after data was updated

【发布时间】：2021-01-16 13:45:03

【问题描述】：

我有两个屏幕，一个显示个人资料信息，另一个屏幕用于编辑信息。如果我输入第一个屏幕配置文件，它会向我显示来自数据库的正确数据。然后我移动到下一个屏幕，我可以在其中更改迄今为止工作的信息。但如果我回到前一个屏幕，我仍然会看到旧数据。所以没有重新渲染。

但是，如果我导航到另一个屏幕，该屏幕会获取新数据。并调用 getCurrentUserProfile 被执行

这是显示用户个人资料信息的屏幕。

const ProfileScreen = props => 

  const [userObj, setUserObj] = useState();

  useEffect(() => 
    let mounted = true;
    getCurrentUserProfile().then(user => 
      if (mounted) 
        setUserObj(user);
      
      console.log(user)
    );
    return () => mounted = false;
  , []);

  console.log("----b------") // This is only output on the first call

我该如何解决这个问题。有没有办法在数据库中发生更改时，让组件重新渲染并获取新数据。

谢谢。

【参考方案1】：

您可能正在使用@react-navigation 包。因此，如果您想在返回上一页时重新获取数据，您可以在“上一页”上使用https://reactnavigation.org/docs/use-is-focused。

看看他们的文档，你就会明白了。

P.S: 通常我们不会直接卸载组件。在 React Native 中，我们使用 navigator 来挂载/卸载组件

【讨论】：

感谢您的提示。以及如何通过导航器安装/卸载组件？我真的是 react-native 和 react 的新手，所以我感谢所有提示/技巧和支持。

手动关闭所有屏幕并打开任何其他屏幕：navigation.dispatch(CommonActions.reset(index: 0, routes: [ name: ‘SomeStack’, params: screen: ‘SomeScreenInSomeStack’ ]。您可以阅读有关“重置”的文档。

reactnavigation.org/docs/navigation-lifecycle

好的，谢谢。你对 react-native 有很多经验吗？