有人可以解释如何确定我的父文件以解除状态吗？

Posted 2023-04-14

【中文标题】有人可以解释如何确定我的父文件以解除状态吗？

【英文标题】：Could someone explain how to determine my parent file in order to lift a state?

【发布时间】：2021-04-09 04:45:41

【问题描述】：

我正在尝试提升一个状态，以便我可以在某些页面上使用它，我正在努力弄清楚我应该在哪里引用这些状态，因为我不清楚我的父母会在哪里。这是我第一次设计应用程序，所以我的文件目录可能没有像应有的那样组织！我附上了我的文件目录的图片作为我的 app.js 的代码，所以你可以看到为什么我不只是在那里引用它们。或者我可以吗？

解决此问题的最佳方法是什么？任何洞察力都比您知道的要多得多！谢谢。

我正在尝试从 SignUpEmail 页面获取输入，更新其状态并将其发送到我的 CreatePassword 页面。

我觉得我没有尽力解释自己！更多上下文，请访问我的上一篇文章 -> How can I create a "global state" in react native so I can send a user input to another page?

app.js

export default class App extends Component 
 
  createHomeStack = () =>
  <NavigationContainer>
  <Stack.Navigator>
  <Stack.Screen name="SplashScreen" component= SplashScreenPage options=headerShown: false/>
    <Stack.Screen name="Welcome" component= WelcomePage options=headerShown: false/>
    <Stack.Screen name="Login" component= LoginPage options=headerShown: false/>
    <Stack.Screen name="SignUpEmail" component= SignUpEmailPage options=headerShown: false/>
    <Stack.Screen name="CreatePassword" component= CreatePasswordPage options=headerShown: false/>
    <Stack.Screen name="PhoneVerification" component= PhoneVerificationPage options=headerShown: false/>
    <Stack.Screen name="Home" component= HomePage options=headerShown: false/>
    <Stack.Screen name="YourName" component= YourNamePage options=headerShown: false/>
    <Stack.Screen name="ProfilePicUpload" component= ProfilePicUploadPage options=headerShown: false/>
    <Stack.Screen name="LikedPage" component= LikedPage options=headerShown: false/>
  </Stack.Navigator>
  </NavigationContainer>
 
  render() 
    return (
      <View style=styles.welcomeScreen>
       this.createHomeStack()
      </View>
  
    )
  

【问题讨论】：

文件结构无关紧要，你的JSX就是把组件当作子组件；只需传递状态和方法将其更改为 prop

【参考方案1】：

通常在提升状态时，您会在 React 虚拟 DOM 树中选择最接近所有需要访问“共享状态”的组件的共同祖先。您的实际文件结构无关紧要。

从您的 sn-p App 看起来 成为 SignUpEmailPage 和 CreatePasswordPage 组件的共同祖先，因为它正在渲染两者，尽管您决定如何传递“共同”状态和回调来更新它是另一个练习。

您可以在App 中使用本地组件状态，创建上下文提供程序并包装公共祖先（每个组件都可以订阅上下文），或者您可以使用 redux 之类的东西进行全面的应用程序状态管理。这取决于您共享的共同状态需求。

【讨论】：

谢谢！所以，我希望在整个应用程序中多次引用这个状态。我想我应该使用redux？或者这是一种矫枉过正的选择？如果我应该使用在应用程序中使用本地组件状态的更简单版本，您能否指出我可以详细说明的地方？不确定如何创建上下文提供程序，我可以弄清楚，但您会为我节省一些时间！再次感谢您的洞察力！！！

@JustinPriede 老实说，我经常参考官方的 react 文档：Lifting State Up 和 Context 很好，并且有有用的示例。 React-redux 是建立在 Context API 之上的抽象，但学习曲线更陡峭，活动部分更多。我认为仅存储一些状态以从一页传递到另一页，我建议使用“提升状态”方法，因为这对您来说可能是最自然的。当您的需求扩大时，您可以查看其他需求。

注意！感谢您所有的时间:)

@JustinPriede 哦，刚刚抓住了“整个应用程序的大量时间”这一点，当然，如果你想尝试一下 redux，那就试试吧。那么我会检查Redux toolkit。这是对 redux（和 react-redux）的又一个抽象，它试图处理 redux 的样板性。 Redux 很棒，所以请不要让我的 cmets 把你吓跑，我只是希望人们为此做好准备。