Javascript 使用ComponentDidUpdate上的全局变量将状态从一个组件传递到另一个组件

在阅读了大量其他相关问题之后。我还没找到答案。我已经改进了我的代码，我相信我已经非常接近一个解决方案，但我仍然无法实现我的目标

我是一个编程新手，对本地语言有反应。我想建立水提醒应用程序，我有2个主屏幕。在主屏幕上，我可以显示当前的进度，以及用户今天喝了多少水。在“设置”中，屏幕用户键入她的年龄、体重和性别，以确定他们每天应该喝的水量（sliderValue状态）

然后在设置屏幕中定义金额后，我想在主屏幕中使用此金额。因为我是一个初学者，不想在我的应用程序中制造复杂性

我正在寻找没有redux等的解决方案。因此，我在其他问题中看到，创建全局变量对我来说非常理想。 我定义了global.drinkAmount，并在使用componentDidUpdate更新状态时将其设置为sliderValue状态。但我还是得零分

// HomeScreen.js

  state = {
    progress: 0,
    drunk: 0,
    open: false,
    goal: global.drinkAmount,
  };

render(){
  <View>
    <Text style={styles.drunk}>{this.state.drunk} / <Text style={styles.goal}>{this.state.goal}</Text></Text>
  </View>
}

---

解决这个问题有两个选择。我认为最简单的方法是使用

异步存储

和导航侦听器来处理生命周期事件

异步存储 AsyncStorage允许您保存字符串以便检索它们。一定要阅读相关文档，他们有一些很好的例子。

可以按以下方式将项设置到异步存储中

import { AsyncStorage } from 'react-native';

// note both key and value must be strings
_storeData = async (key, value) => {   
  try {
    await AsyncStorage.setItem(key, value);
  } catch (error) {
  // Error saving data
  }
}

_retrieveData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    if (value !== null) {
      // We have data!!
      console.log(value);
    }
  } catch (error) {
    // Error retrieving data
  }
};

导航生命周期事件 生命周期事件的导航侦听器允许您查看屏幕是否重新聚焦。

您可以收听四种不同的活动：

• 将聚焦

  -屏幕将聚焦

• didFocus

  -屏幕聚焦（如果有转换，转换完成）

• 将模糊

  -屏幕将不聚焦

• didBlur

  -屏幕未聚焦（如果有转换，转换完成）

在您的屏幕上，您可以让听众捕捉屏幕何时聚焦或何时模糊。您可以在componentDidMount中注册侦听器，并在componentWillUnmount中取消订阅（如果您不希望内存泄漏，这一点很重要）

componentDidMount () {
  this.willFocusSubscription = this.props.navigation.addListener(
    'willFocus',
    payload => {
      console.debug('willFocus', payload);
      // you could make function calls here to retrieve values from AsyncStorage
      // which could then update the values that you have in state.
    }
  );
}

componentWillUnmount () {
  if(this.willFocusSubscription) {
     this.willFocusSubscription.remove();
  }
}

---

或者，您可以在屏幕之间传递值和函数。但我认为这个解决方案非常简单，这意味着您不必使用

AppState

更改来捕获值，因为您的所有值都将更新并存储在异步存储中

您如何在屏幕之间导航？如果应用程序关闭并重新打开，你如何储存水量？@Andrew我使用react导航在屏幕之间导航。这对你来说似乎很愚蠢，但我会保密的。我认为即使在关闭并重新打开应用程序后，水量也会存储/保存在内存中。我没有使用任何服务器连接来存储水量。状态不会持久化，因此当您完全关闭应用程序时将丢失状态。谢谢@Andrew。然后我需要使用服务器，在使用服务器后，我可以从服务器获取大量的水。因此，我的问题将不再相关。你不需要使用服务器，你可以在应用程序中处理它。

componentDidMount () {
  this.willFocusSubscription = this.props.navigation.addListener(
    'willFocus',
    payload => {
      console.debug('willFocus', payload);
      // you could make function calls here to retrieve values from AsyncStorage
      // which could then update the values that you have in state.
    }
  );
}

componentWillUnmount () {
  if(this.willFocusSubscription) {
     this.willFocusSubscription.remove();
  }
}