如何在取消渲染和重新渲染后保持组件状态？

Question

我有两个有条件渲染的屏幕。我希望在离开屏幕并返回后屏幕的状态保持不变。

例如，在下面的可重现代码中，当我位于

ScreenA

并滚动地图时，单击到

ScreenB

，然后返回到

ScreenA

，我希望地图仍位于我最初滚动的位置。然而，它再次呈现得像新的一样，擦除了之前的用户进度。

在导航到 ScreenB 和从 ScreenB 导航后，如何将 ScreenA 保持在用户所在的位置？

我尝试使用 useCallback 正如你所看到的，但没有运气。下面的链接将带您访问snack.expo.io，其中包含所有代码和准备就绪的模拟器。

零食博览会 io 上的可复制代码。

代码也在这里

export default function App() {
  const [screen, setScreen] = useState('A');

  function navToA() {
    setScreen('A');
  }

  function navToB() {
    setScreen('B');
  }

  const RenderScreen = useCallback((props) => {
    return <ScreenA />;
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      {screen === 'A' && <RenderScreen />} // users progress is lost when moving to screenB and back
      {screen === 'B' && <ScreenB />}

      <TouchableOpacity onPress={() => navToA()} style={styles.buttonStyleA}>
        <Text>A</Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={() => navToB()} style={styles.buttonStyleB}>
        <Text>B</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
}

Answer 1

您正在使用条件渲染，因此每次在屏幕上显示组件时，都会对渲染树的已删除屏幕 B 做出反应并添加屏幕 A，反之亦然。

这里有两个选项，渲染两个组件并根据用户所在的屏幕更改它们的 Z 索引，这不是最好的解决方案，但它可以工作，或者使用反应导航并更改呈现这些组件的逻辑屏幕。

您可以在此处阅读有关您的问题的信息。 https://react.dev/learn/preserving-and-resetting-state#state-is-tied-to-a-position-in-the-tree