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

Question

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

我是编码和 native react 的新手。我想构建水提醒应用程序，我有 2 个主屏幕。主屏幕是我显示当前进度、用户今天喝了多少水的地方。在设置中，屏幕用户输入她的年龄、体重和性别来确定他们每天应该喝的水量( slider 值状态)。

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

我正在寻找没有 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>
}

//SettingsScreen.js

 global.drinkAmount = 0;
export default class SettingsScreen extends React.Component {

  state = {
    age: "",
    weight: "",
    gender: "",
    sliderValue: 0
  };

  componentDidUpdate(prevProps, prevState) {
    if (this.state.sliderValue !== prevState.sliderValue) {
      global.drinkAmount = this.state.sliderValue;
    }
  }

Answer 1

有几个选项可以帮助您解决此问题。我认为最简单的方法是使用 AsyncStorage 和生命周期事件的导航监听器。

异步存储

AsyncStorage 允许您保存字符串以便可以检索它们。请务必阅读有关它的文档，他们有一些很好的示例。 https://facebook.github.io/react-native/docs/asyncstorage

您可以通过以下方式将项目设置到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
  }
};

导航生命周期事件

生命周期事件的导航监听器允许您查看屏幕是否已恢复焦点。 https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

您可以收听四种不同的事件:

• willFocus - 屏幕将聚焦
• didFocus - 屏幕聚焦(如果有转换，则转换完成)​​
• willBlur - 屏幕将失去焦点
• 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 更改来捕获值，因为所有值都将更新并存储在 AsyncStorage 中。